I want my website to allow users to accurately create their own clips from a source video I provide.
I have a source video file that I first want to convert to something suitable for a website:
Input #0, matroska,webm, from 'source.mkv': Duration: 00:28:18.57, start: 0.000000, bitrate: 10183 kb/s Stream #0:0: Video: h264 (Constrained Baseline), yuv420p, 1920x1080 [SAR 1:1 DAR 16:9], 23.98 fps, 23.98 tbr, 1k tbn, 48 tbc (default) Stream #0:1: Audio: mp3, 44100 Hz, stereo, s16, 128 kb/s (default)
So I use ffmpeg to convert it like so:
ffmpeg -i source.mkv -c:v libx264 -c:a aac -strict experimental -vf scale="960:-1" source.mp4
Watching this video back it is good enough quality and small enough file size for my needs, and loads/plays on my website.
So I have a webpage that lets users select a start and endpoint on this video - and create a clip. Here's an example of the ffmpeg command that I use for that:
-ss 577.920 -i source.mp4 -t 011.980 -codec:v copy -codec:a copy -vf scale="960:-1" clip1.mp4
The problem is the clip is not always time-accurate enough. Usually the audio is accurate enough but the video stops half a second early or something.
Is there any way to make this accurate and in-sync to say, 0.2 of a second?
-force_key_frames 00:00:00.2 didn't help.
I changed the clipping to use
-c:v libx264 -c:a aac -strict experimental instead of
-codec:v copy -codec:a copy with good (ish) results.
The file can play externally without issue - but when I load it into my html5 video element and play it - the last part of the video (audio is fine) freezes. Less than a second.
Should I try it with another video encoder? What is the best alternative for libx264? Bearing in mind I will probably want this to be on a public website.
But hang on doesn't the fact that it plays accurately without issue with a player like MPC or Windows Media Player suggest that it is a problem with either Google Chrome or the HTML video element? Or am I using an unsupported encoding or something?