For your FREE TIPS

8 Essential Tips to Success
When Using Video Webinars
Learn the
When Setting up a

Moving Beyond Flash: The Yahoo HTML5 Video Player


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.

These new capabilities have enabled a shift in the video-streaming industry from Flash to HTML5 and JavaScript.

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.).

Architecture Decision

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.

Finally, our existing video player, which supported Flash, was mature and battle tested. We needed to decide whether to port the design and logic from Flash to JavaScript, or rebuild and redesign our player. We chose the latter. In doing so, we were able to address several new design goals, including making it extensible to support DASH at a later stage. This decision allowed us to avoid inheriting the Flash-specific drawbacks of the previous design.



Posted in Video Tools Tagged with:
Essential SSL