I use Filereader to read local video file (mp4), so I can display it in video tag.
I need to cut part of mp4 file (i.e. from 5 to 10 seconds) and upload it on server.
My current solution: I upload whole video file on server with "from" and "to" parameters, cut it with ffmpeg on server, upload to s3 and return the url video.
Maybe is it possible only with JS/HTML? I found Blob.slice method but i didn't know how to use it to cut video parts.
Thanks!
An mp4 video file is made up of 'atoms' which are like blocks of information or data within a file.
They contain header and metadata about the tracks in the movie (Audio, video, subtitles etc) and also the media data itself.
The concepts are straightforward but an mp4 file is quite involved when you look at one - there is a good example here from the apple developers site (https://developer.apple.com/library/content/documentation/QuickTime/RM/Fundamentals/QTOverview/QTOverview_Document/QuickTimeOverview.html):
If you take a 'slice' of the mp4 file by simply taking bytes from some point in the file to some other point, you can see that you will be missing header information etc depending where you start from, and will also most likely start in the middle of an 'atom'.
Tools like ffmpeg do the hard work to extract and restructure the file when you want to cut part of the video.
There are projects which run ffmpeg in the bowser, but I'm not sure how practical or adopted they are - the one seems pretty popular anyway:
Update Feb 2023
Web assembly language has made compute intensive operations in the browser much more viable. The ffmpeg WASM project below uses WASM to implement ffmpeg in the browser and it works well in my experience.
You do need to be aware of the need for SharedArrayBuffer support:
Only browsers with SharedArrayBuffer support can use ffmpeg.wasm, you can check HERE for the complete list.
The link referred to above is here: https://caniuse.com/sharedarraybuffer
