Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Multimedia im mobilen Internet

HTML5 Multimedia im mobilen Internet

Presentation at Mobile Tech Conference 2013

Boris Fründt

March 12, 2013
Tweet

More Decks by Boris Fründt

Other Decks in Technology

Transcript

  1. Der Speaker. • Boris Fründt • Senior Web Developer •

    Jung von Matt/next • bondt.me • @bondt Dienstag, 12. März 13
  2. Die Agenda • Die Übersicht. • Die Herausforderungen. • Die

    Technologien. • Die Tools. • Der Ausblick. Dienstag, 12. März 13
  3. 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
  4. Die Übersicht. • CSS3 • SVG • Audio & Video

    Playback • Canvas • HTML Media Capture • WebRTC / getUserMedia Dienstag, 12. März 13
  5. Die Herausforderungen. • Geringe Screen Sizes. • Niedrige Performance. •

    Große Fragmentierung. • Wie bleibe ich responsive? • Welche Tools können helfen? Dienstag, 12. März 13
  6. 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
  7. Die Technologien - CSS3. • Transforms 2D • Transforms 3D

    • Transitions • Animations • (Filters) Dienstag, 12. März 13
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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