Why We Chose To Move To HTML5 Video Player

Why we chose to move to HTML5 video

Daniel Baulig

We recently switched to HTML5 from a Flash-based video player for all Facebook web video surfaces, including videos in News Feed, on Pages, and in the Facebook embedded video player. We are continuing to work together with Adobe to deliver a reliable and secure Flash experience for games on our platform, but have shipped the change for video to all browsers by default.

From development velocity to accessibility features, HTML5 offers a lot of benefits. Moving to HTML5 best enables us to continue to innovate quickly and at scale, given Facebook’s large size and complex needs.

Benefits of HTML5

Development velocity

Using web technologies allows us to tap into the excellent tooling that exists in browsers, among the open source community, and at Facebook in general. Not having to recompile code and being able to apply changes directly in the browser allow us to move fast.

Testability

We have an excellent testing infrastructure at Facebook. By moving to HTML5 video, we can avail ourselves of all the web tools in that infrastructure, like jest and WebDriver, at our disposal.

Accessibility

HTML5 made it possible for us to build a player that is fully accessible to screen readers and keyboard input. We can leverage the accessibility tools that HTML5 provides to make it easier for people with visual impairments to use our products. Making Facebook accessible to everyone is an important part of our mission to make the world more open and connected.

The challenges we had to overcome

Getting logging right

Our video logs help us understand how people use the video player and how it performs. We share some of that data, like view count, with video owners, and we use other data to determine how many and which videos to show to people. We had to make sure the new video player logs the equivalent data and events in the same scenarios as the old player. Implementation differences and details can make this surprisingly hard. To ensure logging correctness, we created a test suite that performs the same user-interaction scenarios against both video players and then validates that the logs are equivalent. This way we had high confidence in the data that our new HTML5 video player reports.

Browser bugs

One of the major issues we wanted to solve before shipping the HTML5 player was the number of bugs in various browsers around HTML5 videos. One specific bug in Chrome's implementation of the SPDY protocol caused the browser to simply stop loading and playing videos in News Feed. We determined that the issue was triggered by loading too many videos concurrently, so we reduced the number of videos we load at the same time and make sure we cancel loading videos as soon as they are no longer required.

Worse performance in older browsers

In theory, most browsers in use support HTML5 video. However, in practice we noticed that a lot of the older browsers would simply perform worse using the HTML5 player than they had with the old Flash player. We saw more errors, longer loading times, and a generally worse experience. We decided to initially launch the HTML5 player to only a small set of browsers, and continuously roll out to more browsers, versions, and operating systems as we improved it and fixed small bugs. That's why we waited until recently to ship the HTML5 player to all browsers by default, with the exception of a small set of them.

Page load time regression

The last major issue we faced while launching the HTML5 player was a regression in the time it takes to load Facebook. At Facebook, we care about the experience we provide to people. How long Facebook takes to load is a contributing factor we look at to gauge user experience. When we shipped the HTML5 player, we noticed that on average it took slightly longer for Facebook to load. By fixing several small performance regressions and making multiple micro-optimizations, we finally reached a level we felt happy with shipping.

Impact on metrics and user experience

Not only did launching the HTML5 video player make development easier, but it also improved the video experience for people on Facebook. Videos now start playing faster. People like, comment, and share more on videos after the switch, and users have been reporting fewer bugs. People appear to be spending more time with video because of it. Videos are an enriching way to connect with the world around you, and we're happy we could make the Facebook video experience better.