HTML5 Video and Audio

short description to HTML5 Video and Audio

Transcript

1. HTML5 Video and Audio Frank Lai
2. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=9,0,16,0" width="320" height="400" > <param name="movie" value="video-filename.swf"> <param name="quality" value="high"> <param name="play" value="true"> <param name="LOOP" value="false"> <embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"> </embed> </object> Embed Video using Flash
3. Embed Video using HTML5 • src: path of video file • controls: show control bar (play/pause, seek bar, volume) <video src="trailer.mp4" controls></video>
4. Different UI Chrome IE11 Safari Firefox
5. Video Codec Support Browser Latest Stable H.264 (mp4) Theora (ogg) VP8 (WebM) Chrome 39 (2014 Dec. 9) 3.0 3.0 6.0 IE 11 (2012 Nov. 21) 9.0 No No Firefox 34 (2014 Dec. 1) 22* 3.5 4.0 Safari 8 (2014 Oct. 16) 3.1 No No *: Firefox supports H.264 on Windows through Windows Media Foundation
6. Audio Codec Support Browser Latest Stable MP3 AAC Vorbis WAV Chrome 39 (2014 Dec. 9) Yes Yes Yes Yes IE 11 (2012 Nov. 21) 9.0 9.0 No No Firefox 34 (2014 Dec. 1) 22* 22* Yes Yes Safari 8 (2014 Oct. 16) Yes Yes No Yes *: Firefox supports MP3 and AAC on Windows through Windows Media Foundation
7. Browser Compatibility • Codec support much better now • But for Firefox on Mac OS X/Windows XP, or IE 8 • Fallback solution still needed
8. HTML5 Video Fallback <video width="320" height="136" controls> <source src="video.mp4" type="video/mp4;"> <source src="video.ogg" type="video/ogg;"> <source src="video.webm" type="video/webm;"> <embed src="video.mp4" type="application/x-shockwav-flash" width="320" height="136"> </embed> </video>
9. HTML5 Video Player • video.js http://www.videojs.com/ • MediaElement.js http://mediaelementjs.com/ • JW Player http://www.jwplayer.com/ • flowplayer https://flowplayer.org/
10. Adaptive Bitrate Streaming • HLS (HTTP Live Streaming) • MPEG-DASH • Media Source Extensions (MSE)
11. Reference • HTML5 Video @wikipedia • HTML5 Audio @wikipedia • Using HTML5 audio and video @MDN • Safari HTML5 Audio and Video Guide
12. Thank you