Your SlideShare is downloading. ×
0
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Velocity Conference 2013: Optimizing The Black Box of HTML Video
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Velocity Conference 2013: Optimizing The Black Box of HTML Video

1,055

Published on

This session, presented by Akamai's Will Law, examines the effect of embedded video on page build times, looks at data transferred under different preload conditions and investigates strategies for …

This session, presented by Akamai's Will Law, examines the effect of embedded video on page build times, looks at data transferred under different preload conditions and investigates strategies for deferred embedding.

It was presented at Velocity Conference 2013, New York City.

To watch the talk, visit: http://youtu.be/Cohbk0cYuG8

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,055
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Optimizing the Black Box of HTML <video> Will Law | Chief Media Architect | Akamai
  • 2. The video tag seems like the simple solution to our online video problems <video controls poster=”myimage.jpg” style="width:480px; height:270px"> <source src=”myfile.mp4" type='video/mp4'/> <source src=”myfile.webm" type='video/webm' /> </video>
  • 3. Let’s take a typical site http://velocityconf.com/
  • 4. and dress it up by adding some video http://mediapm.edgesuite.net/will/presentations
  • 5. Problem #1: Embedding a video object on page load nearly always causes additional download penalty. Solution: defer instantiation of the <video> object until we need it How:  Add a poster image to the page, in the same size and location as the video  When the user clicks it, hide the poster and dynamically add a video element in its place, with autoplay enabled  If we perform this in the same function that handles the image click then we can autostart the video under iOS and Android.  http://mediapm.edgesuite.net/will/presentations/velocitynyc13/optimize/ondemand2.html
  • 6. Problem #2: progressive videos continue downloading when you pause. Solution: remove the video object source on pause. How:  Instantiate the <video> element when the user wants the video  When they click pause, store the playhead position, set the src to “”, remove the element.  Add the element back to the page with the correct src  When they hit play, issue a seek() to the stored position.  http://mediapm.edgesuite.net/will/presentations/velocitynyc13/optimize/ondemand3.html
  • 7. The myth of SBR  Any single bitrate you choose for a video is by definition the wrong video for 99% of users. These users will rebuffer These have lower quality than they could sustain
  • 8. Problem #3: a single bitrate is not optimal for all users. Solution: let’s select an appropriate bitrate before we start delivering the video. How:  When the users loads the page, estimate their throughput by timing the download of a small binary object  Select the appropriate source streams based on this bitrate estimate bitrate and then dynamically add that source to the video object.  http://mediapm.edgesuite.net/will/presentations/velocitynyc13/optimize/measure1.html
  • 9. Problem #4: this timed download is wasteful if the user never watches the video. Solution: defer the bandwidth estimate until the user actually selects the video to watch.. How:  When the user selects the video, estimate their throughput by timing the download of a small binary object  Immediately select the appropriate source streams based on this bitrate estimate bitrate and then dynamically add that source to the video object and start playback  http://mediapm.edgesuite.net/will/presentations/velocitynyc13/optimize/measure3.html
  • 10. Bandwidth is never constant  Even preselecting bitrates will lead to rebuffering problems as bandwidth fluctuates over the duration of the vide, especially for long form content  Ideally we would like to switch bitrates constantly to always give the user the highest quality they can sustain at any point in time. Buffering
  • 11. Bandwidth is never constant  Even preselecting bitrates will lead to rebuffering problems as bandwidth fluctuates over the duration of the vide, especially for long form content  Ideally we would like to switch bitrates constantly to always give the user the highest quality they can sustain at any point in time. Adaptive delivery 1500kbps 1000kbps 500kbps Buffering
  • 12. Adaptive media delivery is the notion of constantly changing the bitrate (quality) of the video being delivered to suit the throughput at that point in time.  It’s typically controlled by the client == smart(er) clients  The stream is delivered in segments in enable switching
  • 13. How does segmentation work? 1 3 Incoming video 500 kbps 1000 kbps 2 is split by an encoder 2000 kbps into multiple short blocks. Each block holds the same section of video, encoded at a different size and bitrate.
  • 14. How does adaptive delivery work? The segmented video is stored on a server, along with a text file which describes the names of each segment. This text file is called a manifest. A player downloads the manifest and then begins requesting individual segments of video. It makes its choice based on bandwidth conditions, grabbing the best quality it can at the time. SERVER CLOUD PLAYER
  • 15. Which adaptive streaming formats exist today?  HTTP Live Streaming (HDS) - Controlled by Apple - Known as HLS, it is supported well by iOS, Safari and half-heartedly by Android.  HTTP Dynamic Streaming (HDS) - Controlled by Adobe - Known as HDS, it is played back only by Flash clients with custom apps.  Smooth Streaming (SMOOTH) - Controlled by Microsoft - Played back via Silverlight clients, Xbox,  MPEG-DASH (DASH) - An ISO standard - Playback via MSE in browsers, native apps on iOS, Android and WinOS.
  • 16. Simple HLS example <video id="player" controls poster="sintel.jpg" preload="none" style="width:480px;height:204px"> <source src="http://multiplatform-f.akamaihd.net/i/multi/april11/sintel/sintelhd_,512x288_450_b,640x360_700_b,768x432_1000_b,.mp4.csmil/master.m3u8" type='application/x-mpegURL' /> <source src="http://akamaicorp-pmd.edgesuite.net/flashvod/video/mp4/sintel.mp4" type='video/mp4'/> <source src="http://akamaicorp-pmd.edgesuite.net/flashvod/video/mp4/sintel.webm" type='video/webm' /> </video>
  • 17. Media Source Extension – the future of browser video  A W3C standard - https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/mediasource.html  Supported today by Chrome, IE11 and Opera  MSE allows JavaScript to - fetch and parse a manifest - retrieve video, audio and text segments using XHR - feed them to the <video> tag to be decoded and rendered. MSE gives developers incredible control over playback, buffering and adaption logic of in-page video.
  • 18. dash.js  An open-source project on Github: https://github.com/Dash-Industry-Forum/dash.js  Provides a library for playback of DASH adaptive content using MSE.  Let’s put it all together and make an implementation which - Uses MBR DASH under Chrome/IE11 - Uses MBR HLS under iOS - Uses progressive media with bitrate selection outside of those environments. - Let’s do all this with a 9KB initial page load. - http://mediapm.edgesuite.net/will/presentations/velocitynyc13/adaptive/all.html
  • 19. Take these thoughts home …  Due to its size, video can have a disproportionate effect on page performance and load times.  Try to defer instantiation of video components until the user actually wants to watch  If using progressive video delivery, use some sort of speedtest to pick the best quality stream your user can enjoy at that moment.  Adaptive delivery gives a better user experience, especially for long form content.  MediaSource extensions in HTML5 are the precursors of the browser becoming the dominant video player application environment among devices. Become familiar with them and enjoy the ride.  All code samples available at http://tinyurl.com/willatvelocity2013 Questions?

×