https://training-course-material.com/index.php?action=history&feed=atom&title=HTML_VideoHTML Video - Revision history2026-05-14T01:01:54ZRevision history for this page on the wikiMediaWiki 1.45.1https://training-course-material.com/index.php?title=HTML_Video&diff=23949&oldid=prevCesar Chew at 17:36, 24 November 20142014-11-24T17:36:17Z<p></p>
<p><b>New page</b></p><div>{{Cat|HTML5}}<br />
<br />
<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" ><br />
;title: HTML5 Video<br />
;author: Sam Bashton<br />
</slideshow><br />
<br />
<br />
=== HTML5 video support ⌘===<br />
<br />
* HTML5 supports a `<video>` tag <br />
* This means you can 'easily' add videos to a website, and have playback without any effort<br />
** Except that that the details mean this isn't really true..<br />
<br />
<br />
<br />
=== Video codecs ⌘===<br />
<br />
* Video has to be encoded in some way <br />
* Almost all codecs are in some way patent encumbered<br />
* Different browsers support different codecs<br />
* Video files must therefore be encoded multiple times<br />
* ... with further fallbacks for older browsers that do not support HTML5 video<br />
<br />
<br />
<br />
=== Video codecs: WebM ⌘===<br />
<br />
* Mime type `video/webm`<br />
* VP8 video codec developed by Google<br />
* In theory free and open<br />
* But the MPEG LA have accused it of patent infringement<br />
* Supported in Chrome + Firefox by default<br />
* Not supported in MSIE or Safari by default<br />
<br />
<br />
<br />
=== Ogg Theora Vorbis ⌘===<br />
<br />
* In theory free and open<br />
* No specific accusation of patent infringement, but hints from MPEG LA <br />
* Worse performance than WebM<br />
* Supported in Chrome + Firefox by default<br />
* Not supported in MSIE or Safari by default<br />
<br />
<br />
<br />
=== MP4 H264 ⌘===<br />
<br />
* Non-free: patented, requires a license from the MPEG LA<br />
* Supported in MSIE 9+, Chrome, Safari<br />
** But Google did say they were going to remove support from Chrome<br />
*** Although, that was some time ago, and it's still supported...<br />
* Not supported in Firefox by default<br />
<br />
<br />
<br />
=== Dealing with cross-browser compatibility ⌘===<br />
<br />
* As seen previously, there is no one codec supported by all browsers<br />
* HTML5 allows multiple files to be specified, with the browser picking one it can play<br />
<source lang="xml"><br />
<video controls><br />
<source src="somevideo.webm" type="video/webm"><br />
<source src="somevideo.mp4" type="video/mp4"><br />
I'm sorry; your browser doesn't support HTML5 video.<br />
<!-- You can embed a Flash player here, to play your mp4 video in older browsers --> <br />
</video><br />
</source><br />
<br />
=== Exercise ⌘===<br />
<br />
* Go to http://www.youtube.com/html5 and enable HTML5<br />
* View a video<br />
* What method/codec does your browser use to play the video?</div>Cesar Chew