HTML5 Multimedia im mobilen Internet

Presentation at Mobile Tech Conference 2013

1. Boris Fründt | Jung von Matt/next HTML5 Multimedia im mobilen Internet. Dienstag, 12. März 13
2. Der Speaker. • Boris Fründt • Senior Web Developer • Jung von Matt/next • bondt.me • @bondt Dienstag, 12. März 13
3. Die Agenda • Die Übersicht. • Die Herausforderungen. • Die Technologien. • Die Tools. • Der Ausblick. Dienstag, 12. März 13
4. Die Übersicht. • HTML5 - Spezifikation und erweiterter Begriff. • Multimedia - Inhalte, die aus mehreren, digitalen, interaktiven Medien bestehen. • Mobiles Internet - Zugang zum „echten“ Web über den Browser mobiler Geräte. Dienstag, 12. März 13
5. Die Übersicht. • CSS3 • SVG • Audio & Video Playback • Canvas • HTML Media Capture • WebRTC / getUserMedia Dienstag, 12. März 13
6. Die Herausforderungen. Dienstag, 12. März 13
7. Die Herausforderungen. • Geringe Screen Sizes. • Niedrige Performance. • Große Fragmentierung. • Wie bleibe ich responsive? • Welche Tools können helfen? Dienstag, 12. März 13
8. Die Technologien. Dienstag, 12. März 13
9. Die Technologien - CSS3. • Früher: DOM Animationen per JavaScript (Bspw. jQuery). • DOM Manipulationen sind Performance hungrig auf mobilen Geräten. • Wenn möglich CSS3 Transitionen oder Animationen verwenden. Dienstag, 12. März 13
10. Die Technologien - CSS3. • Transforms 2D • Transforms 3D • Transitions • Animations • (Filters) Dienstag, 12. März 13
11. CSS3 - Transforms 2D. #skew { transform:skew(35deg); } #scale { transform:scale(1,0.5); } #rotate { transform:rotate(45deg); } #translate { transform:translate(10px, 20px); } #rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); } *Vendor prefixes absichtlich weggelassen Dienstag, 12. März 13
12. CSS3 - Transforms 3D. #perspective { perspective: 800px; perspective-origin: 50% 100px; } #rotateX { transform:rotateX(180deg); } #rotateY { transform:rotateY(180deg); } #rotateZ { transform:rotateZ(180deg); } *Vendor prefixes absichtlich weggelassen Dienstag, 12. März 13
13. CSS3 - Transforms 2D. Quelle: http://caniuse.com/#search=transforms Dienstag, 12. März 13
14. CSS3 - Transforms 3D. Quelle: http://caniuse.com/#search=transforms Dienstag, 12. März 13
15. CSS3 - Transitions. #box1 { ! margin-left: 0%; ! transition: margin-left .5s ease-in-out; } #box1.active { margin-left: 95%; } #box2 { ! transition: transform 1s ease-in-out; } #box2.active { ! transform: scale(.75) rotateX(-52deg) rotateY(36deg) translate3d(600px, 389px, 0px); } *Vendor prefixes absichtlich weggelassen Dienstag, 12. März 13
16. CSS3 - Transitions. Quelle: http://caniuse.com/#search=transitions Dienstag, 12. März 13
17. CSS3 - Animations. @keyframes resize { 0% { padding: 0; } 50% { padding: 0 20px; opacity: 0.2; } 100% { padding: 0 100px; opacity: 0.5; } } #box { animation-name: resize; animation-duration: 1s; animation-iteration-count: 4; animation-direction: alternate; animation-timing-function: ease-in-out; } *Vendor prefixes absichtlich weggelassen Dienstag, 12. März 13
18. CSS3 - Animations. Quelle: http://caniuse.com/#search=animations Dienstag, 12. März 13
19. CSS3 - Filters. • Möglichkeit der Anwendung von Effekten auf das Rendering bevor das Element dargestellt wird • Bsp.: filter: grayscale(100%); • Viele vordefinierte Effekte • Auch per SVG möglich • Custom Filter (Shader) *Vendor prefixes absichtlich weggelassen Dienstag, 12. März 13
20. CSS3 - Filters. Quelle: http://www.adobe.com/devnet/html5/articles/css-shaders.html Dienstag, 12. März 13
21. CSS3 - Filters. Quelle: http://caniuse.com/#feat=css-filters Dienstag, 12. März 13
22. Die Technologien - CSS3. //Früher $('beispiel').animate({ width: 300px, height: 400px, opacity: 1 }, 3000); //Heute .beispiel { width: 0px; height: 0px; opacity: 0; transition: all 3s ease-in; } .beispiel.animate { width: 300px; height: 400px; opacity: 1; } $('.beispiel').addClass('animate'); *Vendor prefixes absichtlich weggelassen Dienstag, 12. März 13
23. Die Technologien - SVG. • Scalable Vector Graphics. • Ideal für unterschiedliche Screen Sizes. • Sehr geringe Dateigröße (gzippable). • Animationen & Filter möglich. • Nicht sinnvoll für Text- / Foto-Ersetzung. • Raphaël Library zum Erstellen & Animieren von SVG. Dienstag, 12. März 13
24. Die Technologien - SVG. <style> #bg { position:fixed; top:0; left:0; width:100%; z-index: -1; } </style> <img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"> Dienstag, 12. März 13
25. Die Technologien - SVG. <linearGradient id="grad1" x2="0" y2="1"> <stop stop-color="#FBE6FB" offset="0"> <animate attributeName="stop-color" values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB" begin="0s" dur="20s" repeatCount="indefinite"/> </stop> <stop stop-color="#CCCCFF" offset="0.2"> <animate attributeName="stop-color" values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF" begin="0s" dur="20s" repeatCount="indefinite"/> </stop> ... </linearGradient> Dienstag, 12. März 13
26. Die Technologien - SVG. Quelle: http://caniuse.com/#search=svg Dienstag, 12. März 13
27. Die Technologien - Audio. <audio> <source src="song.mp3" type='audio/mpeg; codecs="mp3"'> <source src="song.oga" type='audio/ogg; codecs="vorbis"'> Alternativer Inhalt. </audio> Quelle: http://html5doctor.com/html5-audio-the-state-of-play/ • Kein autoplay / multiplay auf vielen mobilen Geräten. • http://remysharp.com/2010/12/23/audio-sprites/ Dienstag, 12. März 13
28. Die Technologien - Video. • HTML5 spezifiziert <video> Tag. • Unterschiedliche Browser unterstützen verschiedene Videoformate. • HTML5 spezifiziert keinen zu verwendenden Codec. • H.264 ist weitverbreitet und wird von Android und iOS unterstützt. • Kein autoplay auf mobilen Geräten. Dienstag, 12. März 13
29. Die Technologien - Video. <style> width: 100% !important; height: auto !important; </style> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Alternativer Inhalt. </video> Dienstag, 12. März 13
30. Die Technologien - Video. <div class="videoWrapper"> <iframe width="560" height="349" src="http://www.youtube.com/embed/video_id" frameborder="0" allowfullscreen> </iframe> </div> .videoWrapper { ! position: relative; ! padding-bottom: 56.25%; /* 16:9 */ ! padding-top: 25px; ! height: 0; } .videoWrapper iframe { ! position: absolute; ! top: 0; ! left: 0; ! width: 100%; ! height: 100%; } Dienstag, 12. März 13
31. Die Technologien - Video. Quelle: http://caniuse.com/#feat=video Dienstag, 12. März 13
32. Die Technologien - Canvas. • Simple API zum Client seitigen Zeichnen. • Zugriff auf Bild- und Video-Informationen. • Pixel-Manipulationen. • Niedrige Performance auf mobilen Geräten. • http://www.chromeexperiments.com/mobile/ Dienstag, 12. März 13
33. Die Technologien - Canvas. Dienstag, 12. März 13
34. Die Technologien - Canvas. Quelle: http://caniuse.com/#search=canvas Dienstag, 12. März 13
35. Die Technologien - HTML Media Capture. • Erweitert <input type="file"> um neue accept-Parameter. • <input type="file" accept="image/*;capture=camera"> • <input type="file" accept="video/*;capture=camcorder"> • <input type="file" accept="audio/*;capture=microphone"> • Keine Möglichkeit Realtime-Effekte anzuwenden (z.B. in Canvas). • Support: • Android 3.0 browser - erste Implementierungen • Chrome for Android (0.16) • Firefox Mobile 10.0 • iOS6 Safari and Chrome (teilweise) Dienstag, 12. März 13
36. Die Technologien - WebRTC / getUserMedia(). • JavaScript API - navigator.getUserMedia(). • Die Kamera / das Mikrofon kann direkt angesteuert werden. • WebRTC - Web Real-Time Communication (Browser to Browser). • Firefox treibt Entwicklung voran. Dienstag, 12. März 13
37. Die Technologien - WebRTC / getUserMedia(). Quelle: http://www.html5rocks.com/en/tutorials/webrtc/basics/ - Bowser (Ericsson) Dienstag, 12. März 13
38. Die Technologien - WebRTC / getUserMedia(). function hasGetUserMedia() { return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); } if (hasGetUserMedia()) { } else { alert('getUserMedia() wird nicht unterstützt.'); } Dienstag, 12. März 13
39. Die Technologien - WebRTC / getUserMedia(). <video autoplay></video> <script> var onError = function(e) { console.log('Ein Fehler ist aufgetreten!', e); }; navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(localMediaStream); video.onloadedmetadata = function(e) { // Los geht's }; }, onError); </script> Dienstag, 12. März 13
40. Die Technologien - WebRTC / getUserMedia(). Quelle: http://caniuse.com/#feat=stream Dienstag, 12. März 13
41. Dienstag, 12. März 13
42. Die Tools. Dienstag, 12. März 13
43. Die Tools. • Adobe Edge Animate: http://html.adobe.com/edge/animate/ • CreateJS Suite: http://www.createjs.com • Greensock: http://www.greensock.com/gsap-js/ • Raphaël JS: http://raphaeljs.com/ • Modernizr: http://modernizr.com/ Dienstag, 12. März 13
44. Der Ausblick. Dienstag, 12. März 13
45. Der Ausblick. • CSS3 Filters • Web Audio API • WebGL • Streaming • etc. • größere Abdeckung leistungsfähiger Geräte und aktueller OS-Versionen Dienstag, 12. März 13
46. Vielen Dank! • Fragen? Dienstag, 12. März 13