HTML5 Multimedia im mobilen Internet

Presentation at Mobile Tech Conference 2013

Transcript

1. Boris Fründt | Jung von Matt/next
   HTML5 Multimedia im mobilen Internet.
   Dienstag, 12. März 13
   

   View Slide

2. Der Speaker.
   • Boris Fründt
   • Senior Web Developer
   • Jung von Matt/next
   • bondt.me
   • @bondt
   Dienstag, 12. März 13
   

   View Slide

3. Die Agenda
   • Die Übersicht.
   • Die Herausforderungen.
   • Die Technologien.
   • Die Tools.
   • Der Ausblick.
   Dienstag, 12. März 13
   

   View Slide

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
   

   View Slide

5. Die Übersicht.
   • CSS3
   • SVG
   • Audio & Video Playback
   • Canvas
   • HTML Media Capture
   • WebRTC / getUserMedia
   Dienstag, 12. März 13
   

   View Slide

6. Die Herausforderungen.
   Dienstag, 12. März 13
   

   View Slide

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
   

   View Slide

8. Die Technologien.
   Dienstag, 12. März 13
   

   View Slide

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
   

   View Slide

10. Die Technologien - CSS3.
    • Transforms 2D
    • Transforms 3D
    • Transitions
    • Animations
    • (Filters)
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. CSS3 - Transforms 2D.
    Quelle: http://caniuse.com/#search=transforms
    Dienstag, 12. März 13
    

    View Slide

14. CSS3 - Transforms 3D.
    Quelle: http://caniuse.com/#search=transforms
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

16. CSS3 - Transitions.
    Quelle: http://caniuse.com/#search=transitions
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

18. CSS3 - Animations.
    Quelle: http://caniuse.com/#search=animations
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

20. CSS3 - Filters.
    Quelle: http://www.adobe.com/devnet/html5/articles/css-shaders.html
    Dienstag, 12. März 13
    

    View Slide

21. CSS3 - Filters.
    Quelle: http://caniuse.com/#feat=css-filters
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Die Technologien - SVG.
    <br/>#bg {<br/>position:fixed;<br/>top:0;<br/>left:0;<br/>width:100%;<br/>z-index: -1;<br/>}<br/>
    
    Dienstag, 12. März 13
    

    View Slide

25. Die Technologien - SVG.
    
    
    values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
    begin="0s" dur="20s" repeatCount="indefinite"/>
    
    
    values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
    begin="0s" dur="20s" repeatCount="indefinite"/>
    
    ...
    
    Dienstag, 12. März 13
    

    View Slide

26. Die Technologien - SVG.
    Quelle: http://caniuse.com/#search=svg
    Dienstag, 12. März 13
    

    View Slide

27. Die Technologien - Audio.
    
    
    
    Alternativer Inhalt.
    
    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
    

    View Slide

28. Die Technologien - Video.
    • HTML5 spezifiziert 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
    

    View Slide

29. Die Technologien - Video.
    <br/>width: 100% !important;<br/>height: auto !important;<br/>
    
    
    
    Alternativer Inhalt.
    
    Dienstag, 12. März 13
    

    View Slide

30. Die Technologien - Video.
    
    src="http://www.youtube.com/embed/video_id" frameborder="0"
    allowfullscreen>
    
    
    .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
    

    View Slide

31. Die Technologien - Video.
    Quelle: http://caniuse.com/#feat=video
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

33. Die Technologien - Canvas.
    Dienstag, 12. März 13
    

    View Slide

34. Die Technologien - Canvas.
    Quelle: http://caniuse.com/#search=canvas
    Dienstag, 12. März 13
    

    View Slide

35. Die Technologien - HTML Media Capture.
    • Erweitert um neue accept-Parameter.
    •
    •
    •
    • 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
    

    View Slide

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
    

    View Slide

37. Die Technologien - WebRTC / getUserMedia().
    Quelle: http://www.html5rocks.com/en/tutorials/webrtc/basics/ - Bowser (Ericsson)
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

39. Die Technologien - WebRTC / getUserMedia().
    
    <br/>var onError = function(e) {<br/>console.log('Ein Fehler ist aufgetreten!', e);<br/>};<br/>navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {<br/>var video = document.querySelector('video');<br/>video.src = window.URL.createObjectURL(localMediaStream);<br/>video.onloadedmetadata = function(e) {<br/>// Los geht's<br/>};<br/>}, onError);<br/>
    Dienstag, 12. März 13
    

    View Slide

40. Die Technologien - WebRTC / getUserMedia().
    Quelle: http://caniuse.com/#feat=stream
    Dienstag, 12. März 13
    

    View Slide

41. Dienstag, 12. März 13
    

    View Slide

42. Die Tools.
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

44. Der Ausblick.
    Dienstag, 12. März 13
    

    View Slide

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
    

    View Slide

46. Vielen Dank!
    • Fragen?
    Dienstag, 12. März 13
    

    View Slide