This is a very specific question about how the seek function (of an HTML5 video element) interprets a video, in this case one in WEBM format and what specific relationship it has with the Maximum Keyframe Interval in the process of coding of said video.
I've made this fiddle to show what I mean:
https://jsfiddle.net/sanxofon/hctuxo3e/
What it does: The idea is to control the position of a paused video with the scroll wheel of the mouse ... in addition, each frame of the video is copied to a canvas element, but I think that has no relation. I mention it just in case.
What to watch: In Chrome (v66) and slightly less in Firefox (v59) the scrolling looks pretty good when the video is encoded with a Maximum Keyframe Interval of 6 or less, but jumps are appreciated when the interval is every 24 frames or more. This is noticeable in the video and even more on the canvas.
FFMPEG: When encoding a video with FFMPEG this is achieved with the option -g6 or -g24 of Maximum Keyframe Interval. However, the file becomes heavier as we decrease the interval. It can be seen that there is no difference between both formats when the video is in play.
You can switch the video in the snippet with the buttons.
- Case 1: When we use the video encoded with -g 6 the video scrolling is acceptable but the size increases: 6.229 Mb.
FFMPEG string used:
ffmpeg -i INPUT.MOV -c: v libvpx -qmin 0 -deadline best -qmax 50 -crf 1 -b: v 100K -g 6 test / video_g6.webm
- Case 2: When we use the video encoded with -g 24 the displacement is not smooth and suffers from jumps but the size decreases: 4,477 Mb.
FFMPEG string used:
ffmpeg -i INPUT.MOV -c: v libvpx -qmin 0 -deadline best -qmax 50 -crf 1 -b: v 100K -g 24 test / video_g24.webm
Why does this happen?
What about -keyint_min or -force_key_frames? Do they have any positive effect? Is it better to use something like cgop (closed gop)?
I would appreciate some reference of consultation on this subject or a more or less detailed explanation of this relationship for both the WEBM container and for MP4 and OGG video.
I am not looking so much for a magical ffmpeg chain (although I would appreciate it) but rather an explanation of how this relationship between the keyframes and the seek of a javascript video works.
Thank you very much for reading here.
P.S. One more thing, if the seek function only stops in a keyframe, is it possible that this frame has more quality than the others so that the quality increases when the video stops?
