What HTML5 video codecs should be used?

Question

I have a video running in the background of my website. It's HTML5 with a jpg fallback.

I use this HTML

        <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
            <source src="video/nieuw.mp4" />
            <source src="video/nieuw.webm" type="video/webm; codecs=vp8,vorbis" />
            <source src="video/nieuw.ogg" type="video/ogg; codecs=theora,vorbis" />
            <img src="img/bg1.jpg" alt="bg" />
        </video>

I have fiddled around with the sequence of these <source> files, and I have fiddled a lot with converting tools. I used MIRO convertor, VLC, iMovie etc.. etc...

But I always end up with at least one browser that doesnt show the movie, for example Safari on Mac desnt work, all other browsers do. Or All browsers but windows / Chrome doesnt work. And it's driving me mad.

Can you guys please post your best practices? What sequence of html5 code do you use, and which program / settings do you use to convert the movie?

Thanks a lot!

Answer 1

Ok, I got it working in every common browser, with a fallback for the olders ones. I used VLC to convert the files, and used the HTML below:

<video id="video_background" volume="0" muted="muted" loop="loop" autoplay="true" preload="auto">
<source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="video/pr6.mp4"></source>
<source type="video/webm; codecs=vp8,vorbis" src="video/pr6.webm"></source>
<source type="video/ogg; codecs=theora,vorbis" src="video/pr6.ogv"></source>
<img alt="bg" src="img/bg1.jpg">
</video>

Answer 2

It's 2016, MPEG-4/H.264 video format has won the battle, you can drop webm and ogv http://caniuse.com/#feat=mpeg4

Convert with AWS Elastic transcoder

Answer 3

The best way to do is integrate any player(like jwplayer) as the video tags are not supported by all browsers and convert all videos in one common format at time of upload as per your player support using any library like ffmpeg lib.

http://www.w3schools.com/html/html5_video.asp

Answer 4

Codecs are beyond the scope of the w3c specification. Zencoder has a pretty good blog post about this exact issues here:

https://www.brightcove.com/en/resources/blog/what-formats-do-i-need-for-html5-video/