John Smith with a flacon of HTML N°5 perfume

HTML5

≻ Guidelines for Web Developers

Chapter 4: Video and audio

This page shows all examples, graphics and links used in this chapter of HTML5: Guidelines for Web Developers. The first table lists examples and graphics with the relevant page numbers in the book, includes links (where applicable) to the online version of that page plus information on browser compatibility, and shows a preview of the figure in the book. Click on this preview to load the figure in original size in JPEG format. The second table lists all URLs which appear in the book on the relevant pages. If you would like to leave feedback or report any errors and bugs, please use the e-mail contact above.

pageexample / figurescreenshot
70Figure 4.1 A video in WebM format in Mozilla Firefox

created with: Firefox 4.0b

screenshot:
74Figure 4.2 Schematic representation of a video container format

created with: Firefox 3.6

screenshot:
79Figure 4.3 Dialog for converting videos in VLC

created with: vlc 1.1

screenshot:
80Figure 4.4 Settings for video conversion in Firefogg

created with: Firefox 3.6

screenshot:
81Figure 4.5 Video conversion with Miro Video Converter

created with: Miro

screenshot:
82Figure 4.6 Troubleshooting during conversion with Miro

created with: Miro

screenshot:
84Figure 4.7 Internet Explorer 8 with Kaltura’s fallback library mwEmbed

created with: IE 8

screenshot:
85Figure 4.8 A video in Internet Explorer 8 playing on the free Flowplayer (Flash fallback)

created with: IE 8

screenshot:
86Figure 4.9 Screen shot of the JavaScript HTML5 video player

created with: Chrome 6

tested with: Firefox 3.6 (fastFwd not working, no slider), Opera 10.6 (fastFwd not working), Chrome 6

screenshot:
100Figure 4.10 Screen shot of the JavaScript HTML5 audio player

created with: Chrome 6

tested with: Firefox 3.6 (fastFwd not working, no slider), Opera 10.6 (fastFwd not working), Chrome 6

screenshot:
pageURL
73http://dev.w3.org/csswg/css3-mediaqueries/
74http://www.webmproject.org/
77http://www.ffmpeg.org/ffmpeg-doc.html
79http://www.videolan.org/
79http://firefogg.org/make
80http://firefogg.org/dev/chunk_post_example.html
81http://www.getmiro.com
82http://html5.komplett.cc/code/chap_intro/timeline.html?lang=en
84http://html5.kaltura.org/js
86http://bigbuckbunny.org/
86http://en.wikipedia.org/wiki/Big_Buck_Bunny
87http://html5.komplett.cc/code/chap_video/js_videoPlayer_en.html
87http://html5.komplett.cc/code/chap_video/js_videoPlayer.js
87http://html5.komplett.cc/code/chap_video/js_videoPlayer.css
88http://www.w3.org/TR/html5/video.html#htmlmediaelement
95http://www.quirksmode.org/js/events_order.html
95http://html5.komplett.cc/code/chap_video/js_dynamicVideo_en.html
96http://html5.komplett.cc/code/chap_video/js_canPlayType.html
98http://html5.komplett.cc/code/chap_video/js_timeRanges.html
99http://www.w3.org/TR/html5/video.html#mediaevents
99http://www.w3.org/2010/05/video/mediaevents.html
100http://audacity.sourceforge.net/
100http://www.wavemage.com/category/music/
102http://html5.komplett.cc/code/chap_video/js_audioPlayer_en.html
102http://html5.komplett.cc/code/chap_video/js_audioPlayer.js
102http://html5.komplett.cc/code/chap_video/js_audioPlayer.css