Video na Web: indo além do elemento <video>

Apresentando sobre o consumo de vídeos na Web e o uso do elemento , além de apresentar técnicas de Adaptative Bitrate para distribuir vídeos na Web.

Links:
[ Cisco Visual Networking Index: Forecast and Methodology, 2015-2020: https://www.cisco.com/c/dam/en/us/solutions/collateral/service-provider/visual-networking-index-vni/complete-white-paper-c11-481360.pdf ]
[ GlobalWebIndex: Video is the Future of Social: http://www.globalwebindex.net/blog/video-is-the-future-of-social ]

Transcript

1. OPEN WEB PLATFORM VÍDEO NA WEB indo além do elemento <video> Newton Calegari W3C Brasil
 Ceweb.br
2. Newton Calegari @newtoncalegari
3. Newton Calegari @newtoncalegari
5. World Wide Web Construção se dá por diferentes atores e em diferentes aspectos
6. Multimídia na Web
7. Globally, consumer internet video traffic will be 80 percent of all consumer Internet traffic in 2019, up from 64 percent in 2014 [Cisco Visual Networking Index: Forecast and Methodology, 2015–2020]
8. It would take an individual more than 5 million years to watch the amount of video that will cross global IP networks each month in 2020 [Cisco Visual Networking Index: Forecast and Methodology, 2015–2020]
10. "mais da metade dos usuários consome vídeo na plataforma" [GlobalWebIndex: Video is the Future of Social]
11. “o compartilhamento de vídeos é quase tão popular quanto o de fotos" "mais da metade dos usuários consome vídeo na plataforma" [GlobalWebIndex: Video is the Future of Social]
12. 1º vídeo do YouTube
13. 1º vídeo do YouTube 2005
16. <video>
17. <video src="braziljs.webm" controls> </video>
18. <video controls> <source src="braziljs.webm" type="video/webm"> <source src="braziljs.mp4" type="video/mp4"> </video>
19. <video controls poster="braziljs-foto.png"> <source src="braziljs.webm" type="video/webm"> <source src="braziljs.mp4" type="video/mp4"> <track kind="subtitles" label="Legenda em Português" src="leg_pt.vtt" srclang="pt"> </track> <track kind="metadata" src="dados.vtt"> </track> </video>
20. 1 00:00:00.500 --> 00:00:02.000 E a BrazilJS está começando! 2 00:00:02.500 --> 00:00:05.300 2 dias na maior conferência Javascript do Universo ... WebVTT
21. 1 00:00:00.500 --> 00:00:02.000 E a BrazilJS está começando! 2 00:00:02.500 --> 00:00:05.300 2 dias na maior conferência Javascript do Universo ... WebVTT HTML JSON
22. <video> Progressive Download
23. <video> Progressive Download
24. <video> Progressive Download
25. <video> + MSE Adaptative Bitrate
26. Media Source Extensions (MSE) "enables JavaScript to dynamically construct media streams for audio and video tags"
29. MPEG-DASH Dynamic Adaptative Streaming over HTTP
33. <video id="player" controls></video> <script src="http://cdn.dashjs.org/latest/dash.all.min.js"> </script> <script> (function(){ var manifest = "http://braziljs.org/conf/manifest.mpd"; var player = dashjs.MediaPlayer().create(); player.initialize( document.getElementById(“#player"), url, true); })(); </script>
34. <video id="player" controls></video> <script src="http://cdn.dashjs.org/latest/dash.all.min.js"> </script> <script> (function(){ var manifest = "http://braziljs.org/conf/manifest.mpd"; var player = dashjs.MediaPlayer().create(); player.initialize( document.getElementById(“#player"), url, true); })(); </script> Manifest file (XML)
35. a Web como plataforma de vídeo ainda está evoluindo Evolução da Web
36. Vídeo 360º
37. obrigado, ! @newtoncalegari W3C Brasil Ceweb.br