http://open.blogs.nytimes.com/2016/02/08/flash-free-video-in-2016/

1. The New York
Times: Flash Free
Video in 2016

3. http://nyti.ms/1UYu8GV

4. /flavioribeiro
/flavioribeiro
flavioribeiro.com

5. Why it is so hard?

6. Before 2005
Windows Media
Player & Real
Networks
First, some background
2005
Macromedia Flash,
VP6 + FLV
2005 - 2010
95% Flash-enabled
browsers, Flash
Media Server &
RTMP, OSMF

7. Flash has become a
strong and ubiquitous
platform for multimedia
on the Internet.

8. More background
2007 - 2011
HTML5 Audio &
Video
2011 - 2013
Apple, HTTP
Streaming
2013 - ?
Media Source
Extensions,
Encrypted Media
Extensions

9. Video Protocols 101
• RTMP (Real Time Messaging Protocol)
RTMP
Server
Player
Stateful

10. • RTMP (Real Time Messaging Protocol)
• HLS (HTTP Live Streaming)
RTMP
Server
Player
HTTP
Server
Stateful
Player
Master Playlist
Video Protocols 101

11. #EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=492225,RESOLUTION=426x240
http://vp.nyt.com/hls/movie_428kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1105269,RESOLUTION=640x360
http://vp.nyt.com/hls/movie_1028kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1718312,RESOLUTION=854x480
http://vp.nyt.com/hls/movie_1628kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2740051,RESOLUTION=1280x720
http://vp.nyt.com/hls/movie_2628kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3966138,RESOLUTION=1920x1080
http://vp.nyt.com/hls/movie_3828kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=163167
http://vp.nyt.com/hls/audio_128kbps/index.m3u8
HLS Master Playlist

12. HLS Master Playlist
#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=492225,RESOLUTION=426x240
http://vp.nyt.com/hls/movie_428kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1105269,RESOLUTION=640x360
http://vp.nyt.com/hls/movie_1028kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1718312,RESOLUTION=854x480
http://vp.nyt.com/hls/movie_1628kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2740051,RESOLUTION=1280x720
http://vp.nyt.com/hls/movie_2628kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3966138,RESOLUTION=1920x1080
http://vp.nyt.com/hls/movie_3828kbps/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=163167
http://vp.nyt.com/hls/audio_128kbps/index.m3u8

13. • RTMP (Real Time Messaging Protocol)
• HLS (HTTP Live Streaming)
RTMP
Server
Player
HTTP
Server
Stateful
Player
Master Playlist
Level Playlist
Video Protocols 101

14. #EXTM3U
#EXT-X-TARGETDURATION:9
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:9,
41957_1_brooklyn-bridge_wg_00000.ts
#EXTINF:9,
41957_1_brooklyn-bridge_wg_00001.ts
#EXTINF:9,
41957_1_brooklyn-bridge_wg_00002.ts
#EXTINF:9,
41957_1_brooklyn-bridge_wg_00003.ts
#EXTINF:9,
41957_1_brooklyn-bridge_wg_00004.ts
#EXT-X-ENDLIST
HLS Level Playlist

15. • RTMP (Real Time Messaging Protocol)
• HLS (HTTP Live Streaming)
Servidor
RTMP
Player
Stateful
Player
Adaptive Streaming
RTMP
Server
HTTP
Server
Video Protocols 101

16. 1.
Proprietary Video Player (Brightcove)
Ads Integration in a Private Plug-in
Live Streaming: RTMP (Adobe)
On Demand: VP6/FLV

17. 2.
VHS (HTML5-First)
Live: VHS with HLS Player + OSMF (FlasHLS)
On Demand: MP4, WEBM, HLS, FLV
Ads integration implemented on Flash component

20. https://blog.mozilla.org/futurereleases/2016/07/20/reducing-adobe-flash-usage-in-firefox/

21. 3. Flash-free
1. Transcoding of the old videos
2. Live Playback in JavaScript
3. Ads Integration with HTML5 VPAID

22. 3. Flash-free
1.Transcoding of the old videos
2. Live Playback in JavaScript
3. Ads Integration with HTML5 VPAID

23. Approximately
32%
of the published vídeos inVP6/FLV

24. 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 20152005 2006 2007 2008 2009 2010 2011 2012
On Demand Videos
VP6/FLV
MP4/WEBM/HLS

25. Transcoding of the old videos
https://github.com/flavioribeiro/node-encoding-wrapper
Storage Area
Network
NodeJS
App
encoding.com
Akamai
NYTimes
API

26. 3. Flash-free
1. Transcoding of the old videos
2. Live Playback in JavaScript
3. Ads Integration with HTML5 VPAID

27. 3. Flash-free
ShakaPlayer (Google)
DASH.js (DASH Industry Forum)
HLS.js (Dailymotion)

28. 3. Flash-free
http://caniuse.com/#feat=mediasource

29. 3. Flash-free

30. 3. Flash-free
1. Transcoding of the old videos
2. Live Playback in JavaScript
3.Ads Integration with HTML5 VPAID

31. Future
1. 360° Vídeos
2.VHS 3.0
3. MPEG-DASH?

32. http://www.nytco.com/careers/technology/

33. Thanks!
/flavioribeiro{ , }

34. Links
• http://www.nytco.com/who-we-are/
• http://www.nytimes.com/slideshow/2016/08/14/business/delivery-by-mail-pail/
s/14mailpail-slide-HVSU.html
• http://topics.nytimes.com/top/news/sports/soccer/world-cup-2010/south-
africa/index.html
• http://www.nytimes.com/interactive/2015/08/26/us/ten-years-after-katrina.html
• http://www.nytimes.com/2009/11/19/us/19orleans.html
• https://www.flickr.com/photos/54268887@N00/5114160903
• http://www.nytimes.com/2011/03/27/business/27unboxed.html
• http://www.nytimes.com/2014/12/01/technology/star-witness-in-apple-suit-is-
steve-jobs.html
• http://www.dailymail.co.uk/sciencetech/article-3160644/Google-Mozilla-pull-
plug-Adobe-Flash-Tech-giants-disable-program-browsers-following-critical-
security-flaw.html
• http://www.zdnet.com/article/firefox-now-blocks-all-versions-of-flash-player-
by-default/
• http://open.blogs.nytimes.com/2016/02/08/flash-free-video-in-2016/?_r=0
• https://blog.streamroot.io/abr-algorithms-work-optimize-stack/