• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
(Responsive) Video
 

(Responsive) Video

on

  • 888 views

Presented at WebPerfDays Amsterdam, the Netherlands, May 2013

Presented at WebPerfDays Amsterdam, the Netherlands, May 2013

Statistics

Views

Total Views
888
Views on SlideShare
576
Embed Views
312

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 312

http://blog.walterebert.com 158
http://dev.walterebert.com 124
https://twitter.com 30

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    (Responsive) Video (Responsive) Video Presentation Transcript

    • http://www.flickr.com/photos/derpunk/4644835025/(Responsive) Video
    • http://www.flickr.com/photos/derpunk/4644835025/No painNo gain
    • Walter Ebertindependent web developer@walterebertwalterebert.comslideshare.net/walterebert
    • http://quirksmode.org/html5/tests/video.html
    • FormatsMP4WebMOgg Theora
    • CodecsH.264 / AACVP8 / Ogg Vorbis
    • 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
    • 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;}
    • 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
    • Apple HTTP Live Streaming (HLS)https://developer.apple.com/streaming/
    • http://walterebert.com/playground/video/hls/
    • MPEG-DASHhttp://dashif.org/
    • 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/
    • http://caniuse.com/#feat=webgl
    • High Efficiency Video Coding (HEVC)a.k.a. H.265http://hevc.hhi.fraunhofer.de/
    • VP9https://en.wikipedia.org/wiki/VP9
    • WebRTC???http://www.webrtc.org/
    • Walter Ebert@walterebertwalterebert.comslideshare.net/walterebert