Main content

Refreshed interface, extra features: new BBC Media Player launched for web browsers

Oli Freke

Executive Product Manager

We are pleased to announce the launch of our new web media player, codenamed Project Toucan. We have been working on the player over the last year, and it brings many benefits for audiences, including a refreshed user interface and additional features. The new player is already live on BBC Weather, BBC Food and BBC Motorsport for most browsers as it begins to incrementally roll out over the coming months – Safari and iPhones will be supported in due course.

New playback and skip forward and back controls in the new version of the media player.

Toucan is a significant update to our existing Standard Media Player (SMP) - which has been around in one form or another since the 2012 Olympics. The existing player has been continuously updated since then and is still used across the whole of the BBC website, from BBC iPlayer to BBC Sounds and from the World Service to Weather. Over the last twelve months, the player delivered over three billion streams to web browsers on desktop, tablet, and mobile phones.

Why introduce a new player?

The SMP dates from 2012 and has accumulated support for many older browsers and technologies, which are increasingly being deprecated or even no longer exist. One example is the use of iframes which is used to separate the player code from the embedding page code. This technique still works but is no longer the preferred method in the web development community. Additionally, we wanted to completely redesign the user interface (UI) and take a mobile-first approach. Building a brand new UI on top of an old codebase didn’t make sense due to the incompatible technologies we wanted to use. The advantage of a new player is that we can drop all the old code, rebuild more efficiently and be more able to add up to date features and technologies in the future.

Toucan, therefore, supports many modern features that audiences expect. These include 20-second skip forward/back buttons, variable speed playback, slicker animations, and a cleaner design with mobile use in mind. Accessibility is also vitally important and has been considered from the start of our development. The player now has keyboard control – press space to play and pause, arrow keys to seek forward and back, and F to go full screen.

The new volume slider in the latest BBC media player.

One major advantage we’ve brought to the new player is a componentised approach. This means that the UI is loaded separately from the main player and enables us to produce different UIs more easily if required and load the most appropriate one. For example, a child-friendly version with larger buttons or additional features could be created and used where necessary (and save download costs by not loading any UI which is not needed). Another advantage of the componentised UI is that we can build-once, use-everywhere, meaning we don’t waste effort building the same UI for multiple use-cases. The new UI that comes with the new player is already being used with the new Chromecast receiver, which has prevented exactly that kind of duplication. This UI can be seen now on your TV if you cast from iPlayer mobile (and shortly, iPlayer web and Sounds mobile).

New Chromecast receiver controls used in the iPlayer mobile app version of our updated player.

We have also updated to a more modern version of CSS and JavaScript, and the player continues to be built on Dash.js, the open-source media playback component, which we contribute back to for the benefit of the Dash.js community. New releases of Dash.js are, of course, always fully tested before making it live in production.

There are performance gains from the smaller size and more efficient build practices of Toucan and benefits from not needing to support as many older browsers as the current player does - and will continue to do so.

It’s built using Web Components, which was recently released in browsers as a native way to produce a component that can easily be integrated in diverse situations. We’ve also dropped our use of iframes in favour of Web Components’ Shadow DOM – this is leading to a significant decrease in player load times.

Now that we have launched the first version, we will be adding all the other features that audiences need in a modern player. This includes audio on-demand, podcasts, live video, live audio, variable speed playback and much more. This will take time, but keep your eyes peeled as we incrementally develop the player across the BBC’s digital services.

You will soon see the new player on all our web and mobile services that playback video and audio, including BBC Sport, BBC News, BBC iPlayer, BBC Sounds, World Service and many more over the coming months as the features that these services require are built and launched into the new player.

While Toucan is exciting and will eventually replace the current player, we won’t rush to switch off the SMP. It will be needed by the audience where they are using browsers that don’t support the necessary features that Toucan requires, and we are committed to making sure that people can enjoy the BBC wherever they happen to be and on whichever platform they choose to use.

But for browsers that do support Toucan - we hope you enjoy that experience. Do send feedback to us at mediaplayer@bbc.co.uk.

More Posts

Previous

Hacking the future