Video

What you need to know about our video player.


DO

  • When the video is not playing, place information regarding it in the center of the video.
  • When the video is playing, place information and controls away from the center.
  • Video length should follow guidelines for Date & Time.

DON'T

  • Don’t use a play button in links if pressing it doesn’t actually start the video playback.

The video player

A centered play icon gets a higher conversion rate, and this is the default pattern. The play icon should be highly visible on all background images.

Example centered play button

It’s up to each digital service to decide if the video length is to be shown along with the play icon. Video length should follow the guidelines for Date & Time.

Examples: 1 tim 20 min, 12 min 8 sek, 1 min 2 sek, 57 sek.

Example centered play button with video length

If a centered play icon doesn’t work well in some context, the lower left corner is also an option.

Example lower-left play button with video length

Information to the user regarding the video, such as error messages, parental controls and live countdowns should be shown in the center of the video image, to increase the chances that the user sees it.

Error message

Programmet kan bara ses i Sverige

Limitations

The video player UI have a minimal size of 280 px for it to work properly on touch devices.

How to link to a video

How links to video content are presented depends on the context.

Video auto-play link

Vegorätt
Äntligen premiär för Sveriges första helvegetariska matprogram. Karoline Jönsson och Elenore Bendel-Zahn guidar oss bland hemodlade grödor, i skogens skafferi och lagar 100 procent vegetariska smakexplosioner.

When a play icon is visible on a link, clicking that link should start video playback, either in-place or on a separate page. In a service where video is the major part of all content, buttons with play icons are not necessary.

Video link without play icon

Vegorätt
Äntligen premiär för Sveriges första helvegetariska matprogram. Karoline Jönsson och Elenore Bendel-Zahn guidar oss bland hemodlade grödor, i skogens skafferi och lagar 100 procent vegetariska smakexplosioner.

For links that don’t lead directly to a video start, but to a page where a video is included, the play icon should not be visible. The video length could still be visible to indicate that the content is playable. In a service where video content is mixed with other content, such as text and images, links to video content should have a play button or a length indication.

Live

It should be clear if an event or a program is currently streaming live. Upcoming live streams should also be marked as such, in a way that clearly distinguishes them from ongoing live streams. It should be clear when the live stream will start.

Video with live icon

Live

It’s up to each digital service to decide if the live stream should start automatically when the event or program is deemed to be live.

Guidelines for platforms with design limitations

On platforms with design limitations (such as Apple TV) it is permissible to deviate from the above guidelines as long as efforts are made to adhere to the overall principles.

Live on AppleTV

Using text to indicate that something is, or will be, live

For example in cases where it’s not possible to use overlays to indicate whether or not a stream is live, an option could be to use textual indicators instead.

Contact

For support or feature requests, contact i-teamplay@svt.se