Slide 1

Slide 1 text

The New York Times: Flash Free Video in 2016

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

http://nyti.ms/1UYu8GV

Slide 4

Slide 4 text

/flavioribeiro /flavioribeiro flavioribeiro.com

Slide 5

Slide 5 text

Why it is so hard?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

#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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

#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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

3. Flash-free

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Thanks! /flavioribeiro { , }

Slide 34

Slide 34 text

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/