Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
The New York Times: Flash Free Video in 2016
Flávio Ribeiro
November 15, 2016
Technology
0
47
The New York Times: Flash Free Video in 2016
http://open.blogs.nytimes.com/2016/02/08/flash-free-video-in-2016/
Flávio Ribeiro
November 15, 2016
Tweet
Share
More Decks by Flávio Ribeiro
See All by Flávio Ribeiro
flavioribeiro
0
81
flavioribeiro
0
9
flavioribeiro
0
4
flavioribeiro
0
240
flavioribeiro
2
650
flavioribeiro
1
290
flavioribeiro
0
150
flavioribeiro
0
260
flavioribeiro
1
120
Other Decks in Technology
See All in Technology
yosuke_matsuura
PRO
0
180
line_developers
PRO
0
170
hayatan
0
190
masakazu
0
150
nkjzm
0
580
tnmt
2
220
oracle4engineer
0
3.6k
pakio
0
120
zak3
1
190
sadayoshitada0919
0
300
sat
40
29k
aditya45
2
2.1k
Featured
See All Featured
rmw
11
810
holman
288
130k
nonsquared
81
3.4k
wjessup
339
16k
robhawkes
52
2.8k
bkeepers
321
53k
chriscoyier
683
180k
eileencodes
113
25k
addyosmani
1346
190k
trishagee
24
2.5k
gr2m
83
11k
sstephenson
145
12k
Transcript
The New York Times: Flash Free Video in 2016
None
http://nyti.ms/1UYu8GV
/flavioribeiro /flavioribeiro flavioribeiro.com
Why it is so hard?
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
Flash has become a strong and ubiquitous platform for multimedia
on the Internet.
More background 2007 - 2011 HTML5 Audio & Video 2011
- 2013 Apple, HTTP Streaming 2013 - ? Media Source Extensions, Encrypted Media Extensions
Video Protocols 101 • RTMP (Real Time Messaging Protocol) RTMP
Server Player Stateful
• RTMP (Real Time Messaging Protocol) • HLS (HTTP Live
Streaming) RTMP Server Player HTTP Server Stateful Player Master Playlist Video Protocols 101
#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
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
• RTMP (Real Time Messaging Protocol) • HLS (HTTP Live
Streaming) RTMP Server Player HTTP Server Stateful Player Master Playlist Level Playlist Video Protocols 101
#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
• RTMP (Real Time Messaging Protocol) • HLS (HTTP Live
Streaming) Servidor RTMP Player Stateful Player Adaptive Streaming RTMP Server HTTP Server Video Protocols 101
1. Proprietary Video Player (Brightcove) Ads Integration in a Private
Plug-in Live Streaming: RTMP (Adobe) On Demand: VP6/FLV
2. VHS (HTML5-First) Live: VHS with HLS Player + OSMF
(FlasHLS) On Demand: MP4, WEBM, HLS, FLV Ads integration implemented on Flash component
None
None
https://blog.mozilla.org/futurereleases/2016/07/20/reducing-adobe-flash-usage-in-firefox/
3. Flash-free 1. Transcoding of the old videos 2. Live
Playback in JavaScript 3. Ads Integration with HTML5 VPAID
3. Flash-free 1. Transcoding of the old videos 2. Live
Playback in JavaScript 3. Ads Integration with HTML5 VPAID
Approximately 32% of the published vídeos inVP6/FLV
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
Transcoding of the old videos https://github.com/flavioribeiro/node-encoding-wrapper Storage Area Network NodeJS
App encoding.com Akamai NYTimes API
3. Flash-free 1. Transcoding of the old videos 2. Live
Playback in JavaScript 3. Ads Integration with HTML5 VPAID
3. Flash-free ShakaPlayer (Google) DASH.js (DASH Industry Forum) HLS.js (Dailymotion)
3. Flash-free http://caniuse.com/#feat=mediasource
3. Flash-free
3. Flash-free 1. Transcoding of the old videos 2. Live
Playback in JavaScript 3. Ads Integration with HTML5 VPAID
Future 1. 360° Vídeos 2.VHS 3.0 3. MPEG-DASH?
http://www.nytco.com/careers/technology/
Thanks! /flavioribeiro { , }
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/