Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The New York Times: Flash Free Video in 2016

The New York Times: Flash Free Video in 2016

5dc4abe3dc14c25021ff2295fc380d73?s=128

Flávio Ribeiro

November 15, 2016
Tweet

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/