如何使用ffmpeg将seekbar嵌入视频中？

Question

如何使用node-fluent-ffmpeg在视频中嵌入搜索栏。

例如：-

Answer 1

脚本：

这是一个有效的脚本，仅使用节点的fluent-ffmpeg在视频底部绘制20px的深红色进度条。它需要安装ffmpeg的最新版本才能工作（我使用4.0.2）。您可以将条形颜色从DarkRed更改为any valid ffmpeg color，并通过将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中建议的类似documentation的库。

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

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