(Responsive) Video

1,003 views

Published on

Presented at WebPerfDays Amsterdam, the Netherlands, May 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,003
On SlideShare
0
From Embeds
0
Number of Embeds
297
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

(Responsive) Video

  1. 1. http://www.flickr.com/photos/derpunk/4644835025/(Responsive) Video
  2. 2. http://www.flickr.com/photos/derpunk/4644835025/No painNo gain
  3. 3. Walter Ebertindependent web developer@walterebertwalterebert.comslideshare.net/walterebert
  4. 4. http://quirksmode.org/html5/tests/video.html
  5. 5. FormatsMP4WebMOgg Theora
  6. 6. CodecsH.264 / AACVP8 / Ogg Vorbis
  7. 7. Media queries<video controls><source src="small.mp4" type="video/mp4" media="all and (max-width:480px)"><source src="small.webm" type="video/webm" media="all and (max-width:480px)"><source src="big.mp4" type="video/mp4"><source src="big.webm" type="video/webm"></video>Candidate for removal from the HTML5 specification
  8. 8. function supports_mp4() {return !!document.createElement(video).canPlayType(video/mp4;codecs="avc1.42E01E").replace(/^no$/,);}function supports_flash() {var hasFlash = false;try {var fo = new ActiveXObject(ShockwaveFlash.ShockwaveFlash);if(fo) hasFlash = true;}catch(e){var fm = navigator.mimeTypes["application/x-shockwave-flash"];if( fm && fm.enabledPlugin ) hasFlash = true;}return hasFlash;}
  9. 9. MP4 moov atomffmpeg -i input.mp4 -c:v copy -c:a copy -movflags faststart output.mp4http://ffmpeg.org/http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html
  10. 10. Apple HTTP Live Streaming (HLS)https://developer.apple.com/streaming/
  11. 11. http://walterebert.com/playground/video/hls/
  12. 12. MPEG-DASHhttp://dashif.org/
  13. 13. ORBX.js• downloadable HD codec written in JS and WebGL• 25% better compression than H.264• adaptive bit-rate while streaminghttp://brendaneich.com/2013/05/today-i-saw-the-future/
  14. 14. http://caniuse.com/#feat=webgl
  15. 15. High Efficiency Video Coding (HEVC)a.k.a. H.265http://hevc.hhi.fraunhofer.de/
  16. 16. VP9https://en.wikipedia.org/wiki/VP9
  17. 17. WebRTC???http://www.webrtc.org/
  18. 18. Walter Ebert@walterebertwalterebert.comslideshare.net/walterebert

×