How to embed seekbar inside a video using ffmpeg?

Question

how to embed seekbar inside a video using node-fluent-ffmpeg.

Ex:-

Malita

Answer 1

Script:

Here's a working script that draws a 20px dark-red progress bar on the bottom of the video using only node's fluent-ffmpeg. It requires a recent version of ffmpeg installed to work (I used 4.0.2). You can change the bar color from DarkRed to any valid ffmpeg color, and change the height by setting bar_height to the desire value in pixels.

#!/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();
});

Sample Output:

Here's a screenshot of the output on a video file:

Stentorian

Can you also demonstrate how to add an icon ahead of seekbar so it moves along with seekbar? – Pessary

And what if I want to show this seekbar at top of the video? – Pessary

Answer 2

You can use a library like flowplayer as suggested in the documentation.

Also, after looking at the options provided by the plugin, you can write your own seekbar, you will need to follow these steps when the video is loaded to calculate it:

1. Get video duration
2. Get video dimensions (specifically width for the seekbar)
3. You need to map your the width of the seekbar with the duration of the video, and set minimum and maximum limits
4. For the seekbar, you need two rectangles of the same size; however one has full width and the other zero
5. Set an interval to add every second to the result of the mapping of the width and duration of the video
6. Detect an onclick / drag event for your seekbar, and update the corresponding width of the red rectangle, and navigate with seek option in your video

Frankenstein