CODEWITHSUNDEEP
htmlinternet-explorerfirefoxvideoogg
Baxter
Baxter

Reputation: 169

HTML5 video is really choppy - anything a developer can do?

An HTML5 video with standard tag such as:

<video>
     <source src="video/intro.mp4" type="video/mp4"/>
     <source src="video/intro.ogv" type="video/ogg"/>
     <source src="video/intro.webm" type="video/webm"/>
</video>

Is reportedly playing really badly for some of our users, mostly in browsers like Firefox and IE. It is really choppy, and out of a full 11 second video at 30fps often shows only a few frames. It is worse when you increase the size of your browser window and therefore the size of the video. For some people it improves on the second load, presumably after it has been cached.

We are not playing the video until at 10 seconds out of 11 have been buffered, so it shouldn't be a buffering issue. The file size is about 4mb. I believe it has standard encoding using H.264. The dimensions are 1920x1080.

Is there anything we can do as developers to improve this experience? In all my searching I am only finding suggestions for the end user, such as turning off hardware acceleration. It does seem to be a common problem, with a lot of complaints about quality even on things like Youtube and Vimeo, but it seems crazy to me that there is no code solution?

Thanks!

Upvotes: 1

Views: 4188

Answers (1)

Offbeatmammal
Offbeatmammal

Reputation: 8228

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. Once you've got a good MP4 experience you can tune the webm/ogv versions the same way

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

Upvotes: 2

Related Questions