Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The New York Times: Flash Free Video in 2016

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

  • Be the first to comment

The New York Times: Flash Free Video in 2016

  1. 1. The New York Times: Flash Free Video in 2016
  2. 2. http://nyti.ms/1UYu8GV
  3. 3. /flavioribeiro /flavioribeiro flavioribeiro.com
  4. 4. Why it is so hard?
  5. 5. 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
  6. 6. Flash has become a strong and ubiquitous platform for multimedia on the Internet.
  7. 7. More background 2007 - 2011 HTML5 Audio & Video 2011 - 2013 Apple, HTTP Streaming 2013 - ? Media Source Extensions, Encrypted Media Extensions
  8. 8. Video Protocols 101 • RTMP (Real Time Messaging Protocol) RTMP Server Player Stateful
  9. 9. • RTMP (Real Time Messaging Protocol) • HLS (HTTP Live Streaming) RTMP Server Player HTTP Server Stateful Player Master Playlist Video Protocols 101
  10. 10. #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
  11. 11. 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
  12. 12. • RTMP (Real Time Messaging Protocol) • HLS (HTTP Live Streaming) RTMP Server Player HTTP Server Stateful Player Master Playlist Level Playlist Video Protocols 101
  13. 13. #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
  14. 14. • RTMP (Real Time Messaging Protocol) • HLS (HTTP Live Streaming) Servidor RTMP Player Stateful Player Adaptive Streaming RTMP Server HTTP Server Video Protocols 101
  15. 15. 1. Proprietary Video Player (Brightcove) Ads Integration in a Private Plug-in Live Streaming: RTMP (Adobe) On Demand: VP6/FLV
  16. 16. 2. VHS (HTML5-First) Live: VHS with HLS Player + OSMF (FlasHLS) On Demand: MP4, WEBM, HLS, FLV Ads integration implemented on Flash component
  17. 17. https://blog.mozilla.org/futurereleases/2016/07/20/reducing-adobe-flash-usage-in-firefox/
  18. 18. 3. Flash-free 1. Transcoding of the old videos 2. Live Playback in JavaScript 3. Ads Integration with HTML5 VPAID
  19. 19. 3. Flash-free 1.Transcoding of the old videos 2. Live Playback in JavaScript 3. Ads Integration with HTML5 VPAID
  20. 20. Approximately 32%
 of the published vídeos inVP6/FLV
  21. 21. 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
  22. 22. Transcoding of the old videos https://github.com/flavioribeiro/node-encoding-wrapper Storage Area Network NodeJS App encoding.com Akamai NYTimes API
  23. 23. 3. Flash-free 1. Transcoding of the old videos 2. Live Playback in JavaScript 3. Ads Integration with HTML5 VPAID
  24. 24. 3. Flash-free ShakaPlayer (Google) DASH.js (DASH Industry Forum) HLS.js (Dailymotion)
  25. 25. 3. Flash-free http://caniuse.com/#feat=mediasource
  26. 26. 3. Flash-free
  27. 27. 3. Flash-free 1. Transcoding of the old videos 2. Live Playback in JavaScript 3.Ads Integration with HTML5 VPAID
  28. 28. Future 1. 360° Vídeos 2.VHS 3.0 3. MPEG-DASH?
  29. 29. http://www.nytco.com/careers/technology/
  30. 30. Thanks! /flavioribeiro{ , }
  31. 31. 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/

×