Successfully reported this slideshow.
Your SlideShare is downloading. ×

(Responsive) Video

Ad

http://www.flickr.com/photos/derpunk/4644835025/
(Responsive) Video

Ad

http://www.flickr.com/photos/derpunk/4644835025/
No pain
No gain

Ad

Walter Ebert
independent web developer
@walterebert
walterebert.com
slideshare.net/walterebert

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Vim Plugin Deployment
Vim Plugin Deployment
Loading in …3
×

Check these out next

1 of 18 Ad
1 of 18 Ad

More Related Content

(Responsive) Video

  1. 1. http://www.flickr.com/photos/derpunk/4644835025/ (Responsive) Video
  2. 2. http://www.flickr.com/photos/derpunk/4644835025/ No pain No gain
  3. 3. Walter Ebert independent web developer @walterebert walterebert.com slideshare.net/walterebert
  4. 4. http://quirksmode.org/html5/tests/video.html
  5. 5. Formats MP4 WebM Ogg Theora
  6. 6. Codecs H.264 / AAC VP8 / 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 atom ffmpeg -i input.mp4 -c:v copy -c:a copy -movflags faststart output.mp4 http://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-DASH http://dashif.org/
  13. 13. ORBX.js • downloadable HD codec written in JS and WebGL • 25% better compression than H.264 • adaptive bit-rate while streaming http://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.265 http://hevc.hhi.fraunhofer.de/
  16. 16. VP9 https://en.wikipedia.org/wiki/VP9
  17. 17. WebRTC??? http://www.webrtc.org/
  18. 18. Walter Ebert @walterebert walterebert.com slideshare.net/walterebert

×