O documento discute a migração de um player de vídeo baseado em Flash para HTML5, descrevendo como a mudança foi feita em fases para evitar downtime, isolando o código Flash e migrando funcionalidades para novas tecnologias como HLS.js. A arquitetura do novo player é modular e extensível através de plugins para adicionar novas funcionalidades. Apesar de 99% das funcionalidades serem suportadas em HTML5, o Flash ainda é necessário para DRM em alguns navegadores.

1. Adeus, Flash.
Olá, HTML5.
Do player monolítico ao extensível por micro módulos

2. O quê ? por quê ? como ?

3. O quê ? por quê ? como ?
suporte manutenções + features

4. O quê ? por quê ? como ?

5. O quê ? por quê ? como ?

6. O quê ? por quê ? como ?
● Introdução
● Como
○ Sem downtime e mudanças no cliente
○ Feita em fases
○ Isolamento
○ multi-browser
● Arquitetura
● 99% mas aquele 1% é Flash
● Conclusões

7. O que é o player?
ComponenteWidget
APIUX
Produto Plataforma

8. Produto

9. Plataforma

10. Complexidades :: além de tocar vídeo
ads autenticação autorização
n formatos distribuição n devices
proteção instrumentação ...

11. Quem são os clientes?
...

12. Migração :: Sem mudança no cliente
Clientes
<script src=”p.min.js”></script>

13. Migração :: Zero downtime
Cache-control: public, max-age=3600
Cache-control: public, max-age=120
Cache-control: public, max-age=0

14. Migração :: Faseada
✓

15. Migração :: Isolamento
Player JS (DOM) Player Flash (Sandboxed)

16. Migração :: Isolamento

17. Migração :: Isolamento
<iframe></iframe>

18. Migração :: Isolamento (page render)

19. Migração :: Multi-browser
● Busque o mais simples possível
● O isolamento já ajuda
● Testes rodando em múltiplos browser (yes IE)
● Use caniuse.com (Known issues também)
● SVG ao invés de fonts
● Sem bala de prata
● Busque os browsers com uso considerável

20. Arquitetura :: Rascunhos

21. 00 99
core
media control
container
playback
<mp4> <hls> <dash>

22. Arquitetura :: Plugins

23. Clappr :: Comunidade contribuindo e usando

24. Clappr :: Multicamera

25. Clappr :: 3D

26. Clappr :: 3D (WebGLRenderer)

27. Clappr :: P2P (WebRTC)

28. Arquitetura :: Webpack

29. Arquitetura :: ES6

30. Arquitetura :: Como substituir o Flash?
Playback
Hls
(hls.js)
(tag video)
Flash
(flashls)
(flash)
Html5Video
(tag video)
Android, iOS, Safari
playlist.m3u8
FF >= 43, Chrome >= 45, Safari >
9, Edge, IE11, android >= 4.4.4
...
Hls
(hls.js)
(tag video)
1
2
3

31. HLS.js baseado em MediaSource (html5)

32. Clappr
Player Globo :: Extensão do Clappr
Media
Control
Propaganda
UI
Autent.
API
DRM
UX
Autor.

33. Mas aquele 1% é Flash
DRM

34. Conclusões
● Facilidade de manutenção e introdução de novas
features
● Maior rapidez na inicialização
● Comunidade trabalha ao seu favor
● Fazer em fases é essencial
● Não confie em third party
● Foque nos browsers com maior adoção
● Isole tudo

35. Feedbacks

36. E isso tudo para …

37. Links
● https://github.com/clappr/clappr
● https://github.com/dailymotion/hls.js
● https://developer.mozilla.org/en-
US/docs/Web/API/MediaSource
● https://github.com/thiagopnts/video-360
● https://github.com/streamroot/clappr-p2phls-plugin
● https://github.com/tjenkinson/clappr-thumbnails-plugin
● http://leandromoreira.com.br/