The New York Times: Flash Free Video in 2016

Transcript

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

2. None

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
18. None
19. None

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

    2015 2005 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/