Responsive Videos, mehr oder weniger -...
Transcript of Responsive Videos, mehr oder weniger -...
![Page 1: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/1.jpg)
Responsive Videos,mehr oder weniger
Frontend Usergroup RheinMain Wiesbaden 17.06.2014
![Page 2: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/2.jpg)
Walter Ebert
@wltrdwalterebert.de
slideshare.net/walterebert
![Page 3: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/3.jpg)
<video src=movie.mp4>
![Page 4: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/4.jpg)
Windows Phone
![Page 5: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/5.jpg)
PS3
![Page 6: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/6.jpg)
Android
![Page 7: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/7.jpg)
iOS
![Page 8: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/8.jpg)
Mac
![Page 10: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/10.jpg)
https://en.wikipedia.org/wiki/Vhshttps://en.wikipedia.org/wiki/Betamax
![Page 11: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/11.jpg)
MP4-Support in Firefox
![Page 12: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/12.jpg)
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.“
![Page 13: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/13.jpg)
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
![Page 14: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/14.jpg)
Formate
MP4WebM
Ogg Theora
![Page 15: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/15.jpg)
Formate
MP4WebM
Ogg Theora
![Page 16: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/16.jpg)
Codecs
H.264VP8
![Page 18: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/18.jpg)
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;}
![Page 19: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/19.jpg)
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
![Page 20: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/20.jpg)
http://demos.flowplayer.org/videotest/canplay.html
![Page 21: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/21.jpg)
Wann ist ein Video abspielbar?
![Page 22: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/22.jpg)
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)
![Page 23: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/23.jpg)
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 />
![Page 24: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/24.jpg)
Responsive
![Page 25: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/25.jpg)
![Page 26: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/26.jpg)
![Page 27: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/27.jpg)
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>
![Page 28: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/28.jpg)
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/
![Page 29: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/29.jpg)
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 a
us Google C
hrome
![Page 30: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/30.jpg)
Hilfsmittel Javascript
window.matchMedia('(min-width:481px)')
oder
window.innerWidth > 480
oder
document.documentElement.clientWidth > 480
http://caniuse.com/#feat=matchmedia
![Page 31: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/31.jpg)
Adaptive
![Page 32: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/32.jpg)
Apple HTTP Live Streaming (HLS)
<video src=movie.m3u8>
https://developer.apple.com/streaming/
![Page 34: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/34.jpg)
#EXTM3U#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=400000,RESOLUTION=480x270ts/480x270.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=600000,RESOLUTION=640x360ts/640x360.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1500000,RESOLUTION=1280x720ts/1280x720.m3u8
http://walterebert.com/playground/video/hls/
![Page 35: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/35.jpg)
http://www.spacetelescope.org/images/heic1315a/
Die Zukunft
![Page 37: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/37.jpg)
https://github.com/Dash-Industry-Forum/dash.js
![Page 38: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/38.jpg)
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/
![Page 39: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/39.jpg)
https://twitter.com/badass_js/status/473517249714610176http://techblog.netflix.com/2014/06/html5-video-in-safari-on-os-x-yosemite.html
![Page 40: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/40.jpg)
MPEG-DASH schreibt kein Codec vor
![Page 41: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/41.jpg)
MPEG-DASH schreibt kein Codec voraber aktuell setzen die meisten auf H.264
![Page 42: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/42.jpg)
http://hevc.hhi.fraunhofer.de/
https://strukturag.github.io/libde265.js/
High Efficiency Video Coding (HEVC)a.k.a. H.265
![Page 43: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/43.jpg)
<!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
![Page 44: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/44.jpg)
<!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
![Page 45: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/45.jpg)
<!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
![Page 47: Responsive Videos, mehr oder weniger - …walterebert.com/files/...rm-responsive-videos-mehr-oder-weniger.pdfResponsive Videos, mehr oder weniger ... Responsive](https://reader034.fdocuments.net/reader034/viewer/2022052608/5ae2d6797f8b9ad47c8d873d/html5/thumbnails/47.jpg)
Walter Ebert
@wltrdwalterebert.de
slideshare.net/walterebertwalterebert.com/playground/video/