HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012
3 likes2,207 views
The document discusses HTML5 multimedia capabilities for playing audio and video natively in browsers without plugins like Flash. It covers the <video> and <audio> tags, supported formats like MP4, WebM, Ogg Theora, and browser support. It also discusses the media playback API and features like controls, sources for different formats, and responsive design.
![canvas also works with video
ctx = canvas.getContext("2d");
v = document.getElementsByTagName('video')[0];
ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);
grab currently displayed frame (update as appropriate)](https://image.slidesharecdn.com/devup27-04-2012-120427023207-phpapp02/85/HTML5-multimedia-browser-native-video-and-audio-DevUp-HTML5-Barcelona-27-04-2012-42-320.jpg)
![camera access
// Opera
navigator.getUserMedia({video:true},success,error);
[…]
video.src = stream;
// WebKit
navigator.webkitGetUserMedia("video",success,error);
[…]
video.src = window.webkitURL.createObjectURL(stream);
gUM Shield: http://html5doctor.com/getusermedia/](https://image.slidesharecdn.com/devup27-04-2012-120427023207-phpapp02/85/HTML5-multimedia-browser-native-video-and-audio-DevUp-HTML5-Barcelona-27-04-2012-55-320.jpg)
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012
- 1. HTML5 multimedia BROWSER-NATIVE VIDEO AND AUDIO Patrick H. Lauke / DevUp / Barcelona / 27 April 2012
- 2. <video>
- 3. Adobe Flash currently most common video/audio delivery mechanism
- 4. <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en &fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
- 5. <video src="video.webm"></video> originally proposed by Opera in 2007 dev.opera.com/articles/view/labs-a-call-for-video-on-the-web
- 6. <video src="video.webm" controls autoplay muted loop preload="none|metadata|auto" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a> </video>
- 7. video as native object
- 11. <video> and JavaScript var v = document.getElementById('player'); v.play() v.pause() v.volume = … v.currentTime = … v.addEventListener('loadeddata', function() { … }, true) v.addEventListener('play', function() { … }, true) v.addEventListener('pause', function() { … }, true) v.addEventListener('timeupdate', function() { … }, true) v.addEventListener('ended', function() { … }, true)
- 14. HTML5 does not specify how browser controls should look
- 18. in-page video on mobile?
- 20. video formats the big debate?
- 21. HTML5 does not specify video container/codec (same as with images in HTML 4.01)
- 22. MP4/H.264 or Ogg Theora or WebM/VP8
- 23. MP4 / H.264 ubiquitous, royalty encumbered, licensing
- 24. Ogg Theora free and open, no licensing fees not many tools for it, not web optimised
- 25. WebM / VP8 open and royalty-free, web-optimised support by hardware and software vendors
- 27. Browsers vs codecs Chome Firefox IE Opera Safari Ogg Theora ✔ ✔ ✔ WebM / VP8 ✔ ✔ ? ✔ MP4 / H.264 ✔ ✔ ✔ mobile and devices slightly better...
- 28. providing multiple sources <video controls width="…" height="…"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <source src="movie.ogv" type="video/ogg"> <!-- fallback content --> </video>
- 29. specifying codecs <video controls width="…" height="…"> <source … type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'> <source … type='video/webm; codecs="vorbis,vp8"'> <source … type='video/ogg; codecs="theora,vorbis"'> <!-- fallback content --> </video>
- 30. understanding fallback <video controls width="…" height="…"> <source … type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'> <!-- fallback content → <p>Shown to browsers that don't support video element, and NOT just browsers that don't support MP4/H.264</p> </video>
- 32. feature-detection for codecs v.canPlayType('video/webm;codecs="vp8,vorbis"') "probably" | "maybe" | "" < WAT?
- 34. video and Responsive Web Design <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)">
- 37. flash fallback for older browsers http://camendesign.com/code/video_for_everybody
- 38. <video controls width="…" height="…"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <object width="…" height="…" type="application/x- shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value=" … file=movie.mp4" /> <!-- fallback content --> </object> </video>
- 39. <audio>
- 40. audio...exactly the same as video <audio src=”music.mp3” controls autoplay … ></audio> <audio controls autoplay> <source src="music.mp3" type="audio/mpeg" /> <source src="music.oga" type="audio/ogg" /> <!-- fallback content --> </audio> formats: MP3 vs Ogg Vorbis (vs WAV)
- 41. <canvas>
- 42. canvas also works with video ctx = canvas.getContext("2d"); v = document.getElementsByTagName('video')[0]; ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2); grab currently displayed frame (update as appropriate)
- 45. is it all safe to use, right now?
- 47. don't do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
- 48. feature-detection progressive enhancement, graceful degradation diveintohtml5.info/everything.html
- 49. feature-detection for audio/video if (!!document.createElement('video').canPlayType;) { … } if (!!document.createElement('audio').canPlayType;) { … }
- 50. sublimevideo.net
- 51. www.jplayer.org
- 55. camera access // Opera navigator.getUserMedia({video:true},success,error); […] video.src = stream; // WebKit navigator.webkitGetUserMedia("video",success,error); […] video.src = window.webkitURL.createObjectURL(stream); gUM Shield: http://html5doctor.com/getusermedia/