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!
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>