I understand that HTML5 video is way more complicated than its proponents would like us to believe. Safari uses the proprietary H.264 codec, whereas Firefox, Chrome and Opera all support the open-source Theora. Internet Explorer doesn't support either, so needs a fallback, such as .mov or Flash.
I found a superb guide somewhere that put together a step-by-step guide for HTML5 on all these browsers, but I can't find it anywhere. Very annoying :(
What's the best way to implement HTML5 video so that all these browsers are covered? (Unfortunately, Flash is not an option.)
Edit: Ok, from what I've read, here is my own answer: This is the best way to implement HTML 5 video...
<video id="video" width="450" height="170" preload="auto" autoplay="autoplay">
<source src="../static/video/video.mp4" />
<source src="../static/video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="../static/video/video.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Fallback (either Flash, an image, or a "Video not supported" message, etc.) -->
</video>
It's the only way that's worked as expected on every browser so far. Unfortunately autoplay doesn't seem to be working in Chrome? :(
Update: Chrome doesn't support Autoplay. Update update: Autoplay works with the "muted" attribute.
This may be to late but here you are. these are some CSS controls Enjoy.
video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}<video width="400" height="260" controls disablePictureInPicture controlsList="nofullscreen nodownload noplaybackrate">
<source src="http://cdn.papercut.com/video/home/home2.mp4"type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm"type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"type="video/ogg" />
</video>