I'm trying to setup a very basic html5 page that loads a .mp4 video that is 20MB. It appears that the browser needs to download the entire thing rather than just playing the first part of the video and streaming in the rest.
This post is the closest thing I've found while searching... I tried both Hand Brake and Data Go Round by neither appeared to make a difference:
Any ideas on how to do this or if it's possible?
Here is the code I'm using:
<video controls="controls">
<source src="/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
moov
(metadata) is before the mdat
(audio/video data). This is also called "fast start" or "web optimized". For example, Handbrake has a "Web Optimized" checkbox, and ffmpeg and avconv have the output option -movflags faststart
.You can check the headers being sent by your web server using curl -I http://yoursite/video.mp4
or using the developer tools in your browser (Chrome, Firefox) (reload the page if it is cached). The HTTP Response Header should include Content-Type: video/mp4 and Accept-Ranges: bytes, and no Content-Encoding:.