Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

(Responsive) Video

1,243 views

Published on

Presented at WebPerfDays Amsterdam, the Netherlands, May 2013

Published in: Technology
  • Be the first to comment

  • Be the first to like this

(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

×