node.js - 如何使用 ffmpeg 在视频中嵌入搜索栏？

Question

如何使用node-fluent-ffmpeg.

前任：-

Answer 1

脚本：

这是一个工作脚本，它仅使用节点的fluent-ffmpeg. 它需要ffmpeg安装最新版本才能工作（我使用的是 4.0.2）。您可以将条形颜色从更改DarkRed为任何有效ffmpeg颜色bar_height，并通过设置为所需的像素值来更改高度。

#!/usr/bin/env node
var ffmpeg = require('fluent-ffmpeg');

let bar_height = 20;
let input_file = 'input_file.mp4';
let output_file = 'output_file.mp4';
ffmpeg.ffprobe(input_file, (err, data) => {
    let input_duration = data.format.duration;
    let progressBarGraph = [
        {
          inputs: '0',
          filter: 'drawbox',
          options: {
              h: 'iw',
              c: 'DarkRed',
              width: 'iw',
              thickness: 'fill'
          },
          outputs: 'rectangle'
        },
        {
            inputs: ['0', 'rectangle'],
            filter: 'overlay',
            options: {
                x: `-W+W*(t/${input_duration})`,
                y: `H-${bar_height}`
            },
            outputs: "output"
        }
    ];

    ffmpeg(input_file).complexFilter(progressBarGraph, "output").output(output_file).run();
});

样本输出：

这是视频文件输出的屏幕截图：

Answer 2

您可以按照文档中的建议使用像flowplayer这样的库。

另外，在查看插件提供的选项后，您可以编写自己的搜索栏，您需要在加载视频时按照以下步骤计算它：

1. 获取视频时长
2. 获取视频尺寸（特别是搜索栏的宽度）
3. 您需要将搜索栏的宽度与视频的持续时间进行映射，并设置最小和最大限制
4. 对于搜索栏，您需要两个相同大小的矩形；但是一个有全宽，另一个为零
5. 设置间隔以每秒添加视频的宽度和持续时间的映射结果
6. 检测搜索栏的点击/拖动事件，并更新红色矩形的相应宽度，并在视频中使用搜索选项导航