Download - Vídeo na Web: indo além da tag video
![Page 1: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/1.jpg)
OPEN WEB PLATFORM
VÍDEO NA WEB indo além do elemento <video>
Newton Calegari W3C Brasil Ceweb.br
![Page 2: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/2.jpg)
Newton Calegari @newtoncalegari
![Page 3: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/3.jpg)
Newton Calegari @newtoncalegari
![Page 4: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/4.jpg)
![Page 5: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/5.jpg)
World Wide WebConstrução se dá por diferentes atores e em diferentes aspectos
![Page 6: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/6.jpg)
Multimídia na Web
![Page 7: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/7.jpg)
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]
![Page 8: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/8.jpg)
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]
![Page 9: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/9.jpg)
![Page 10: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/10.jpg)
"mais da metade dos usuários consome vídeo na plataforma"
[GlobalWebIndex: Video is the Future of Social]
![Page 11: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/11.jpg)
“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]
![Page 12: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/12.jpg)
1º vídeo do YouTube
![Page 13: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/13.jpg)
1º vídeo do YouTube
2005
![Page 14: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/14.jpg)
![Page 15: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/15.jpg)
![Page 16: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/16.jpg)
<video>
![Page 17: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/17.jpg)
<video src="braziljs.webm" controls></video>
![Page 18: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/18.jpg)
<video controls> <source src="braziljs.webm" type="video/webm"> <source src="braziljs.mp4" type="video/mp4"></video>
![Page 19: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/19.jpg)
<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>
![Page 20: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/20.jpg)
100:00:00.500 --> 00:00:02.000E a BrazilJS está começando!
200:00:02.500 --> 00:00:05.3002 dias na maior conferência Javascript do Universo
...
WebVTT
![Page 21: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/21.jpg)
100:00:00.500 --> 00:00:02.000E a BrazilJS está começando!
200:00:02.500 --> 00:00:05.3002 dias na maior conferência Javascript do Universo
...
WebVTT
HTMLJSON
![Page 22: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/22.jpg)
<video>
Progressive Download
![Page 23: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/23.jpg)
<video>
Progressive Download
![Page 24: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/24.jpg)
<video>
Progressive Download
![Page 25: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/25.jpg)
<video> + MSE
Adaptative Bitrate
![Page 26: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/26.jpg)
Media Source Extensions (MSE)
"enables JavaScript to dynamically construct media streams for audio and video tags"
![Page 27: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/27.jpg)
![Page 28: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/28.jpg)
![Page 29: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/29.jpg)
MPEG-DASH
Dynamic Adaptative Streaming over HTTP
![Page 30: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/30.jpg)
![Page 31: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/31.jpg)
![Page 32: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/32.jpg)
![Page 33: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/33.jpg)
<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>
![Page 34: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/34.jpg)
<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)
![Page 35: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/35.jpg)
a Web como plataforma de vídeo ainda está evoluindo
Evolução da Web
![Page 36: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/36.jpg)
Vídeo 360º
![Page 37: Vídeo na Web: indo além da tag video](https://reader034.vdocument.in/reader034/viewer/2022042908/58ec4b6a1a28ab086d8b4763/html5/thumbnails/37.jpg)
obrigado, !
@newtoncalegari
W3C Brasil Ceweb.br