Video
A basic video component that can be used in various ways and on many different types of pages.
Table of Contents
Edit this section, Opens in new windowOverview
Video can be used on product or marketing pages.
Video messages and tutorials play an integral role in how customers learn about our products. They give users an engaging way to discover features and learn how to accomplish unfamiliar workflows.
Variations
| Type | Purpose |
|---|---|
| HTML5 video | For video files that is hosted locally or through a CMS |
| Embedded YouTube video | For YouTube videoes |
Usage
Use videos wherever some light guidance can help a user complete a task, especially when learning a new feature or trying out something for the first time. Be sure to present the video in a way that doesn’t compete with primary page content. We never want our video content to get in the way of the user’s getting stuff done. Use good judgment on when and where to include videos.
You can put videos in the Split component aswell.
You can also have captions/subtitles with your video.
You can use youtube videos and self hosted videos.
Overlay
The player has got an overlay before the video is activated, when it's activated and hovered, and when it is active and paused.
Controls
- Some controls are optional and some are now, both are covered below
- Controls are an integral part of usability, make sure all controls work as they should
If the video contains sound, there should be a way for users to control the volume and to mute/unmute
SubtitlesIf the video contains spoken word, a narrator or any sort of dialog, the user should be able to choose from a set of subtitles
SeekerIf the video is long, and ment to be informative instead of a visual element, the user should be able to see the duration of the video and be able to traverse the video
Closed captionFor accessibility purposes, if the video is not just a visual element, closed captions should be present. These are not just subtitles, but should also describe what's going on in the video. The transcripts are generated from closed captions, so it's important to include the dialogue here as well
QualityGenerally, the quality of the video displayed should fit the bandwidth the user has. The user should also have the possibility to change the quality of the video if it's not just a visual element.
TranscriptThe transcript is generated from the closed captions tracks, and should reflect the chosen language of either the html tag or the user.
The transcript component is a simple expandable panel.
- Play/pause
- Control panel
- Volume control
- Subtitles control
- Seeker control
- Closed caption control
- Quality control
Volume
The volume control allows the user to control the volume. The control can mute, increase or decrease the volume
If the button is clicked, the video is muted/unmuted. When hovering over the control, the volume can be either increased or decreased.
The control has a clear icon for both states, and a title describing the control.
- Volume control
- Volume button to toggle on and off sound
- Input to change volume
Subtitles
- Subitles control
- Button to toggle the menu
- Menu selection for subtitles
- Toggle off subtitles
Seeker
- Seeker control
- Current time
- Seeker/Progress bar
- Remaining time
Closed captions
- Button
- Description
- Menu
Quality
- Button
- Menu
- Default quality is set to automatic
Transcript
The transcript component should be automatically generated by the enclosed caption tracks in the video element.
- Expandable
- Content