Autoplay

Autoplay allows you to automatically move onto another video or audio item when you’ve come to the end of the one you’re currently watching or listening to. It supports a hands-free mode of viewing and listening but allows you to stay in control.

v1

Contributors

Overview

The Autoplay panel as it appears on top of a Standard Media Player in iPlayer.The Autoplay panel as it appears on top of a Standard Media Player in iPlayer.

How it works

Autoplay appears near the end of a video or audio item, which can be either part of a series or playlist.  

The Autoplay panel is made up of the following:

  • Countdown labeling. For example, ‘Next episode starts in…’
  • The countdown timer, which is made up of;
    1. A circular countdown indicator.
    2. A numerical countdown timer inside the circle.
  • A thumbnail image, title and description text of the next item.
  • A 'Cancel' label.
  • A 'Close' button (optional).
An example of the Autoplay panel.An example of the Autoplay panel.

As the countdown progresses, the filled circular countdown indicator empties anti-clockwise to show the passage of time. The filled colour value of the countdown is usually the primary brand colour of the parent product.

The numerical timer counts down to ‘1’, after which the Autoplay panel vanishes and the next item begins to play.

Example of Autoplay counting down to next episode.Example of Autoplay counting down to next episode.

Skipping the Autoplay countdown

Clicking or tapping on the next item will play it straight away.

Example of skipping the Autoplay countdown.Example of skipping the Autoplay countdown.

It can also be done on TV by pressing the 'Select' button on the remote control.

If you are using a keyboard, pressing the 'Enter' button will cancel Autoplay.

Cancelling the Autoplay Countdown

You can cancel Autoplay by clicking or tapping anywhere on the countdown timer or on the ‘Cancel’ button.

The numerical timer changes into an 'X' button and the 'Cancel' button is highlighted.

If you are hovering with a mouse over the countdown timer, the countdown will pause.

On TV, pressing left on your remote control highlights and pauses the countdown timer, from this point, you can press select to cancel the countdown timer.

Example of how to cancel the countdown.Example of how to cancel the countdown.

If you press the 'Enter' button on your keyboard, you cancel the countdown timer.

After the countdown is cancelled

When you have cancelled the countdown, it disappears but the next item stays in the panel, sliding left to fill the empty space.

Example of the Autoplay panel still showing the next episode or item in the playlist.Example of the Autoplay panel still showing the next episode or item in the playlist.

Cancelling the countdown by interacting with other items

Sometimes the Autoplay panel is accompanied by a recommendation playlist of other videos or audio.

If you choose to look at the playlist and scroll through the content, the Autoplay countdown will be cancelled. This allows you time to browse other content.

An example of interacting with the Recommendation playlist.An example of interacting with the Recommendation playlist.

On TV, pressing the Right key on your remote control to go to the next item will dismiss the countdown.

Cancelling Autoplay by closing the panel

Example of tapping outside of the Autoplay panel to close the panel.Example of tapping outside of the Autoplay panel to close the panel.

If you choose to close the Autoplay panel, the countdown will be cancelled.

You can do this on touch devices by tapping outside the panel or the 'Close' button and with a mouse by clicking the 'Close' button. On Keyboard, use the Tab key to navigate to the 'Close' button.

On TV, you can dismiss the panel by pressing Back button on your remote control.

Rules

Elements

Autoplay should include the following elements:

  • Countdown labeling (‘Next episode starts in…’)
  • The countdown timer which is made up of;
    1. A circular countdown indicator.
    2. A numerical countdown timer inside the circle.
  • Title and description text of the next item.
An example of what you can and can't do with the Autoplay panel.An example of what you can and can't do with the Autoplay panel.

Countdown

The animation of the circular countdown emptying is distinctive as a countdown and easy to spot. It will not be confused with a progress bar and it has a big enough tap target area on a touch device. Also, it helps to draw the eye to the countdown and understand the function.

The numerical countdown timer should also be there to reinforce the message and give concrete information about when the media will start.

Labelling

Labeling should be appropriate to the content being played and should make a connection with the numerical countdown timer.

It should be in sentence format. For example:

  • Next video starts in...
  • Next programme starts in...
  • Next episode starts in...
  • Up next in...

Positioning

The Autoplay panel should be positioned to the right-hand-side of the player, sitting just above the player controls so that they remain accessible when they appear.

Accessibility

When the Autoplay panel appears, the keyboard focus is on the Autoplay panel title so that if you are using a screen reader, it will read out “The next item is about to play. Press Enter to cancel”.

The next item will play automatically unless you press the 'Enter' or 'Tab' button.

Pressing the 'Enter' button cancels the countdown timer and the keyboard focus moves to the next item. The screen reader then reads out the title of the next item allowing you to decide if you’d like to watch it.

If you pressed the 'Tab' button, the countdown would pause and the screen reader would read out “Cancel Automatic Play of next episode”.

Note

We are always working to improve usability and accessibility across our products.

Please be aware that the accessibility guidance in this document is subject to change based on user testing to be conducted after publication.

Variations

Compact version

The BBC Standard Media Player should not be used at sizes smaller than 266px. Therefore, the Autoplay panel cannot be smaller than 266px and in this case, it would cover the whole player.

Example of the compact version of the Autoplay panel.Example of the compact version of the Autoplay panel.

When should Autoplay appear?

When Autoplay appears depends on the following;

  • The length of the media it appears on.
  • Whether the programme has end credits or not.

On a programme with end credits, Autoplay should appear 15 seconds before the end of the programme.

This also applies to radio programmes where there is no image that will be hidden by the Autoplay panel.

For shorter video and audio clips without credits, it is best to wait until after the item has stopped playing before introducing the Autoplay panel.

Length / Duration of countdown

This also depends on the length of the media that is playing. For programmes with end credits, the countdown should be 15 seconds long.

For shorter clip content, we recommend a countdown of 5 seconds.

More to watch / recommendation playlist

The Autoplay panel can be followed by a recommendation playlist. This is good practice because it gives people more options but it is not an essential part of the Autoplay experience.