Creating a cross-platform HTML5 video player for London Live

in Service Design   —  

We knew from the outset, that a key part of the digital platform development for TV channel London Live would be the video player. This would be essential to delivering short-form 'video on demand' (news, clips), long form 'catch-up' and for the broadcasting the live TV stream.

In addition, we also wanted to deliver a seamless in-player experience. This would include overlays for the programme titles, sponsor branding, and share panels. While HTML5 offers by far the best solution for delivering online video, there are a number of challenges we needed to overcome.

The need to deliver a great online video service

There are several reasons why HTML5 has replaced Flash as the industry standard for serving online video, not least the fact that it:

  • Is supported by few mobile devices
  • Requires separate browser plug-in
  • Drains mobile and laptop batteries, fast.

In today's digital platforms, where users are looking for seamless and cost-effective universal solutions that work across their multiple integrations, Flash's limitations were not ideal.

Whilst it made sense for London Live's video service to use the more flexible HTML5, there are other, different issues to overcome. Each browser implements controls like play, pause and stop differently, and content publishers have no control over the layout of the player. This makes delivering a consistent user experience difficult.

Developing a cross-platform video player

To provide a consistent and outstanding video experience on London Live, we developed a custom video player skin that gives users a standard, feature-rich interface across all platforms. The player uses the HTML5 video element as the main playback technology, with Flash used as a backup for older browsers.

As well as the usual play, volume and progress controls, the custom-built skin includes the following features:

  • Sponsor logo and player branding for different programmes
  • Text overlay - showing the title, description and additional information about the programme
  • Age-restriction dialogue for relevant programmes.
  • Share panel - twitter, facebook and embed codes

The completed player provides the following benefits for both London Live, and the end-users:

  • Near-universal support of browsers. Users enjoyed the same user experience and using Flash as a backup meant we were able to deliver video content to almost 100 per cent of visitors.
  • Low battery drain, high quality. With battery drain levels far lower for HTML5 than for Flash, London Live's videos played more smoothly and also had a lower incidence of frame-skipping on cheap laptops and tablets than its Flash counterpart.
  • Flexible branding and additional video monetistation opportunities

We based our player on the leading open-source player technology: video.js. This has a consistent JavaScript API and highly customisable plug-in system allowing us to extend the player functionality to suit London Live's needs. As well as achieving a consistent UX, this also allowed us to speed up development by sharing the work between several developers.

The result

As you can see from the screenshot above, our approach resulted in a completely new look and feel for the London Live video player, but one that remains the same regardless of which browser their customers are using.

Read next