Playing Large MP4s on Webpage

Question

I have several MP4 videos I want to play over my website, playing using CloudFront and the files are in S3. However, the files are LARGE! We're talking 35G in size. Naturally this will not work wrt standard playing.

I'm using something like this:

<video id="my_video" width="700" height="550" poster="images/bunny.jpg" loop>

    <source id="src_mp4" src="largefile.mp4" type="video/mp4" />

</video>

What options do I have available to make this work so it looks like it's streaming? I have the files as MP4 and AVI.

Answer 1

I don't think that there's any way to make it "look" like it's streaming, nor do I think there is there anything to actually achieve streaming of media files through HTML5.

A few things you could do:

• Reduce the picture/audio quality of the videos
• Convert the videos to the Webm format and serve them if the browser can play them (codec detection might be buggy so you may not want to do this)
• Make the user wait a certain amount of time (maybe 30 seconds) and pray that the video can play until the end without having to buffer.

If you don't want to do any of the above, this question may help.

Answer 2

You can provide HTTP adaptive bitrate streaming with DASH in HTML5. Have a look at dash.js and the player example which works great but browser support is still limited.

You can provide 35 GB mp4 URLs to an HTML5 video tag providing your web server hosting the mp4 files is properly configured but generally you will be advised to consider streaming rather than progressive download for large files. There are streaming servers out there (Wowza, Red5, IIS ...) that would do that but this could represent a cost and some commitments on your side as you will need to maintain a streaming server and a player (most likely a hybrid player Flash + HTML5 to get good browser coverage).

Also platforms like Vimeo or Youtube (or other online video platforms) may fit your requirements in some cases.