the new york times: flash free video in 2016
TRANSCRIPT
The New York Times: Flash Free
Video in 2016
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)
RTMPServer
PlayerStateful
• RTMP (Real Time Messaging Protocol)
• HLS (HTTP Live Streaming)
RTMPServer
Player
HTTPServer
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)
RTMPServer
Player
HTTPServer
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)
ServidorRTMP
PlayerStateful
Player
Adaptive Streaming
RTMPServer
HTTPServer
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
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 20152005 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
Future1. 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/