The New York Times: Flash Free Video in 2016

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

Transcript

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