如何使用 ffmpeg 在视频中嵌入搜索栏？

Question

如何使用 node-fluent-ffmpeg.

在视频中嵌入搜索栏

例如：-

Answer 1

您可以使用 flowplayer as suggested in the documentation 这样的库。

另外，看了插件提供的选项后，你可以自己写seekbar，你需要在加载视频时按照以下步骤计算：

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

Answer 2

脚本：

这是一个工作脚本，仅使用节点的 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();
});

示例输出：

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

如何使用 ffmpeg 在视频中嵌入搜索栏？

How to embed seekbar inside a video using ffmpeg?

ffmpeg

node.js

fluent-ffmpeg