Adobe Flash, once the de-facto standard for media playback on the web, has lost favor in the industry due to increasing concerns over security and performance. At the same time, requiring a plugin for video playback in browsers is losing favor among users as well. As a result, the industry is moving toward HTML5 for video playback.
HTML5 video playback development is still nascent, and it was initially supported by browsers in its simplest form. Only recently has support been expanded to include capabilities for adaptive streaming. Adaptive streaming offers two key benefits:
- Adaptive Bitrate (ABR): An algorithm that detects a user’s bandwidth, CPU capacity, player size, etc. in real time and accordingly adjusts the bits downloaded to stream video.
- Variable buffer sizing: A capability that allows us to control the time it takes for the playback to start.
Without ABR and variable buffer sizing, users have a poor viewing experience, as video playback cannot adapt to changing conditions on a user’s device.
At Yahoo, our video player uses HTML5 across all modern browsers for video playback. In this post we will describe our journey to providing an industry-leading playback experience using HTML5, lay out some of the challenges we faced, and discuss opportunities we see going forward.
The First Steps Toward HTML5
We took the first step in our HTML5 journey in October 2015 when we globally live-streamed a regular season NFL game for the first time. For the event, we deployed a “pure” HTML5 player on Safari; this was based on the native HTML5 support in the browser for HTTP Live Streaming (HLS). As part of that effort, we built the capabilities in our video player to allow different video rendering techniques based on the client environment (viz. browser, Flash support, device configuration, OS, etc.).
In order to broadly support HTML5 video on all browsers, we needed to re-architect the way our player streamed video. This presented a number of choices, all of which could impact Yahoo’s business and the user experience.
The first and probably most critical was to determine the streaming protocol to support. The choice was between HLS and DASH, both of which support Adaptive Streaming over HTTP. However, in order to maintain a simple serving stack and get to market quickly, we decided to support HLS. To support iOS, we would have needed to support HLS anyway, and as the standards evolved, Media Source Extensions (MSE) could be made to work with HLS. MSE is a recent advancement to HTML5 standards that allows the dynamic generation of media streams for playback via the <video> tag.
Our next decision was whether to build, buy, or leverage open source for an HTML5 player. Yahoo was not alone in its desire for an HTML5-based player, and a number of open source options existed. Leveraging one of these players would jump-start our effort. However, analysis, including field tests of the in-market players, confirmed that the available players would not provide the quality, performance, and scale that we expected out of the Yahoo Video Player.
By Amit Jain
Read more at www.streamingmedia.com