HTML5 video

0f3a2fe881c742a4dbb5afef5a8f5c0e?s=47 Jakub Mikulas
September 26, 2014

HTML5 video

Prezentace ze srazu Frontendisti.cz 26.9. v Ostravě o videu na responsivním webu http://srazy.info/frontendisti/4744

Video: http://youtu.be/LLmbOVOLGQA

0f3a2fe881c742a4dbb5afef5a8f5c0e?s=128

Jakub Mikulas

September 26, 2014
Tweet

Transcript

  1. HTML5 <video> Jakub Mikuláš

  2. Video?

  3. Klient chce na webu video…

  4. Dáme to na youtube! Konverze Embedování Sdílení Zdarma Social discovery/virály

    Reklamy?! DMCA?! Žádný branding 900kb Zdarma Nejde omezit přístup Nejdou napojit analytiky .videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  5. Platform as a Service (PaaS) • Neřešíte technickou stránku streamingu

    • Pracujete víceméně jen s API • Platformy dost často dodávají vlastní přehrávače • Můžete omezovat přístup k videím - pro doménu, pro registrované uživatele… • Vlastní analytics, retargeting… • Nevhodné pro menší nebo speciální video projekty
  6. Self-hosted • O fous složitější • Doporučuji používat Content Delivery

    Network (CDN) • Video používat jako prvek UI (žádný "play", žádný border) • Video zobrazovat v neobvyklých rozměrech • Interaktivní video, neomezené možnosti
  7. editonthefly.com

  8. paypal.com 11 MB

  9. http://www.nytimes.com/newsgraphics/2013/10/27/south-china-sea/ A Game of Shark and Minnow

  10. Tiny Blog Prototype - Kevin Rose http://www.youtube.com/watch?v=N6UW0JY5PUs

  11. <video> <video width="960" controls> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4">

    </video> <video src="video.mp4" width="960" controls></video> w Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unncessarily complicated approach. http://dev.w3.org/html5/spec-preview/the-source-element.html
  12. H.264 MP3/AAC (.mp4) VP8/VP9 (.webm) HLS HTTP Live Streaming Chrome

    ✓ ✓ Firefox ✓ IE ✓ iOS ✓ ✓ Android ✓ ✓ ✓ Formáty, kontejnery, kodeky a protokoly
  13. Díky za pozornost