Responsive Videos, mehr oder weniger
1 like•8,131 views
1) The document discusses responsive video formats and delivery methods for different devices. 2) It covers video codecs like H.264 and VP8, as well as formats like MP4, WebM and OGG. 3) Adaptive streaming technologies like Apple's HLS and MPEG-DASH are presented as ways to deliver the most appropriate video quality based on a user's bandwidth and device capabilities.
![function hasMp4() {
try {
return !!document.createElement('video')
.canPlayType('video/mp4; codecs="avc1.42E01E"')
.replace(/^no$/, '');
} catch(e) {
return false;
}
}
function hasFlash() {
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;
}](https://image.slidesharecdn.com/frontendrm-responsive-videos-mehr-oder-weniger-140617170059-phpapp02/85/Responsive-Videos-mehr-oder-weniger-18-320.jpg)
Responsive Videos, mehr oder weniger
- 1. Responsive Videos, mehr oder weniger Frontend Usergroup RheinMain Wiesbaden 17.06.2014
- 5. PS3
- 6. Android
- 7. iOS
- 8. Mac
- 12. http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html MP4-Support in Chrome „Though H.264 plays an important role in video, as our goal is to enable open innovation, support for the codec will be removed and our resources directed towards completely open codec technologies.“
- 13. Video for Everybody <video width="640" height="360" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogv" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value="controlbar=over&image=video.jpg&file=video.mp4" /> <img src="video.jpg" width="640" height="360" alt="Video Title" title="No video playback capabilities, please download the video below" /> </object> </video> <p><strong>Download Video:</strong> Closed Format: <a href="video.mp4">"MP4"</a> Open Format: <a href="video.webm">"WebM"</a> Open Format: <a href="video.ogv">"Ogg"</a> </p> http://camendesign.com/code/video_for_everybody
- 16. Codecs H.264 VP8
- 17. Codecs H.264 VP8 VP9 http://caniuse.com/#feat=webm
- 18. function hasMp4() { try { return !!document.createElement('video') .canPlayType('video/mp4; codecs="avc1.42E01E"') .replace(/^no$/, ''); } catch(e) { return false; } } function hasFlash() { 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; }
- 19. 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
- 20. http://demos.flowplayer.org/videotest/canplay.html
- 21. Wann ist ein Video abspielbar?
- 22. Wann ist ein Video abspielbar? 1. Format (MP4, WebM, ...) 2. Codec (H.264, VP8, ...) 3. Auflösung (HD, FullHD,UHD, …) 4. Bitrate (kbps) 5. Framerate (FPS)
- 23. HTML5 Video Preload http://www.stevesouders.com/blog/2013/04/12/html5-video-preload/ <video src="video.mp4" preload="metadata" /> <video src="video.mp4" preload="auto" /> <video src="video.mp4" preload="none" /> <video src="video.mp4" autoplay />
- 24. Responsive
- 27. Fluid <!DOCTYPE html> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> video,object {max-width:100%; height:auto;} </style> <video controls> <source src="video.mp4"> <source src="video.webm"> <object type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value="file=video.mp4"/> </object> </video>
- 28. Responsive <video controls> <source src="small.mp4" media="(max-width:480px)"> <source src="small.webm" media="(max-width:480px)"> <source src="big.mp4"> <source src="big.webm"> </video> http://walterebert.com/playground/html5/media-queries/
- 29. Responsive <video controls> <source src="small.mp4" media="(max-width:480px)"> <source src="small.webm" media="(max-width:480px)"> <source src="big.mp4"> <source src="big.webm"> </video> Entfernt aus Google Chrom e
- 30. Hilfsmittel Javascript window.matchMedia('(min-width:481px)') oder window.innerWidth > 480 oder document.documentElement.clientWidth > 480 http://caniuse.com/#feat=matchmedia
- 31. Adaptive
- 32. Apple HTTP Live Streaming (HLS) <video src=movie.m3u8> https://developer.apple.com/streaming/
- 38. Media Source Extensions (MSE) Encrypted Media Extensions (EME) Web Cryptography API http://www.w3.org/TR/media-source/ http://www.w3.org/TR/encrypted-media/ http://www.w3.org/TR/WebCryptoAPI/
- 40. MPEG-DASH schreibt kein Codec vor
- 41. MPEG-DASH schreibt kein Codec vor aber aktuell setzen die meisten auf H.264
- 42. http://hevc.hhi.fraunhofer.de/ https://strukturag.github.io/libde265.js/ High Efficiency Video Coding (HEVC) a.k.a. H.265
- 43. <!DOCTYPE html> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> .player { height:0;overflow:hidden;padding-bottom:56.25%;position:relative; } .player iframe { height:100%;left:0;position:absolute;top:0;width:100%;overflow:hidden; } </style> <div class="player"> <iframe src="video.html" frameborder="0" allowfullscreen></iframe> </div> 16:9 http://walterebert.com/playground/video/responsive/ Fluides iframe
- 44. <!DOCTYPE html> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> video,object {position:absolute;width:100%;height:100%;left:0;top:0;} </style> <video controls> <source src="small.mp4" media="(max-width:480px)"> <source src="small.webm" media="(max-width:480px)"> <source src="big.mp4"> <source src="big.webm"> <object type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value="file=big.mp4"/> </object> </video> Responsive Seite
- 45. <!DOCTYPE html> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> video,object {position:absolute;width:100%;height:100%;left:0;top:0;} </style> <video controls> <source src="small.mp4" media="(max-width:480px)"> <source src="small.webm" media="(max-width:480px)"> <source src="big.mp4"> <source src="big.webm"> <object type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value="file=big.mp4"/> </object> </video> Responsive Seite Oder welcher Code auch immer aktuell passt
- 46. Fin