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

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