Apresentando sobre o consumo de vídeos na Web e o uso do elemento <video>, além de apresentar técnicas de Adaptative Bitrate para distribuir vídeos na Web. MPEG-DASH, Media Source Extensions 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 ]

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