Search code examples
javascripthtmlvideoamazon-cloudfront

Confused about streaming video in HTML5


What is the best way to play HTML5 video istantly from an Amazon Cloudfront distribution?

I've done lots of research on the subject, and can't seem to work out the best way of doing it.

I'm currently using popcorn.js, and have tried with video.js as well. Video is working, it's just not playing straight away on all browsers. In IE it seems to download the whole file first.

What's the simplest solution for HTML5 video using MP4s on an Amazon Cloudfront distribution at the moment?


Solution

  • If you are delivering an mp4 then "instantly" may always have some delay - the client needs to download enough of the video to play without buffering (CloudFront etc will help as they'll cache closer to the user)

    You will want to ensure that your mp4 file is optimized for best delivery... you'll need to play around with some of the settings but I would recommend making sure the MOOV element is at the start of the file to help the browser get enough metadata quickly.

    I use ffmpeg to optimize content, usually something along these lines

    ./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4
    

    you will want to play with the frame size (-s parameter) and the target bitrate (-b) to get the right balance of size and quality for the speed you need.

    have a look at preparing mp4 file for html 5 for a slightly longer answer as well