Video player

We display embedded videos on pages using the Vimeo API. Videos are content loaded on to the Vimeo platform and our sites use the API to render them.

Design

Structure

Behaviour

States

The Video component has 3 states. The first being its default state, a smaller, condensed design that holds a collection of information including the thumbnail, Title, description, and video time estimate. This default state helps embed a video within a content page in a more concise way, taking up less space while still providing the user with enough information to understand the function of the component.

The second state is the Opened state. An expanded container that holds a full-sized video which auto plays when triggered. Given the video is linked via Vimeo, this state also shows the full video controls supplied by the Vimeo API. The final part of this expanded view includes the Video Transcript tab, the tab holds the transcript provided with any video, a necessary addition for meeting accessibility standards.

Interactions

In the default state, both the video thumbnail, and the ‘WATCH NOW’ text have hover states. The thumbnail has a translucent overlay, whilst the small play button and text who a darker blue.

Within the Opened state, the Video itself uses Vimeo’s UI for the videos playback buttons and settings. An exit button is also provided in the top right of the container to lead a user back to the default state. Lastly, the video transcript functionality has a collective hover state across the transcript icon, title, and Accordion like Plus symbol. The combination of these elements helps provide a large click area for the transcript dropdown, and the Plus symbol follows on the similar theme and function of our Accordion type dropdown.

Placement

In-Page Placement

Video components live within the standard content page. There is also an option provided to allow the video component to only be displayed in its Opened state, which may alter its placement within a page.

Iconography

A small play button in the default state helps a user quickly identify the function of the component.

In the opened view, we use an Accordion like Plus symbol which rotates to become a cross when triggered, binging through a common functionality to show a user there is more detail to be revealed. Along with this, a transcript icon, indicating lines of text, adds symbolism to the function of the component.

Guidance

When to use this component

• Visually embed a video within the content of a page
• Default state can be used to neatly provide an optional video, one that needs a user's action to be seen.
• Stacking multiple videos in one space using the default state
• The opened view is good for a more important video, one that is of high importance or a user to view

Instead of linking away to a video using a hyperlink, this component is a suitable way to visually embed a video into the content of a page. Allowing it to be easily recognised, enabling the user to form a connection between the content around it and the video itself, and providing a shorter timeframe between triggering and playing the video.

Using the default Video state helps embed the video within other content, it stands out less whilst providing necessary information for a user to understand its purpose. It is also a great way to stack multiple videos in one place, allowing a more concise design without taking up too much of the viewport.

The opened view can also be used as a default display, this may be used when the video is not connected directly to the content around it, or the video is of high importance and needs to be seen by users.

When to consider a different component

• If the video is very short or lacks visual complexity, it may be easier to use text and images to showcase the content.

Videos should likely be used when information is better described verbally or with multiple changing visual elements. Therefore, if the information you need to portray to the user could be easily described through basic text, it would be recommended that a Video component is reserved for information of more depth and complexity.

Usability

Providing a video length preview in the default state gives the user a better understanding of how much time they would need to commit to watching the video, this can help with the retention of user engagement with videos as they are conscious of the time needed to view it.

Accessibility

As a Government organisation, we must follow Web Standards. This means that no videos will be accepted for uploading without closed captions and transcripts.

Closed Captions

Captions (sometimes called subtitles) are the best way to make videos accessible for deaf people. They are a written version of the spoken word on the video. It is also helpful to those who are not fluent in the language spoken.

Closed captions vs open captions

The term closed in closed captioning indicates that not all viewers see the captions: they are only for those who choose to activate them. On the other hand, open captions are visible to all viewers: they are a permanent part of the video.

The Ministry standard is closed captioning as this is best practice and supports all users accessing our content.

We usually receive videos from the business who have engaged with a Provider who have created the closed caption (.srt) file. If the video has been created internally and the person who has created the video is unsure how to create a closed caption file, these instructions may be helpful: http://help.elucidat.com/en/articles/1593071-subtitles.

Transcripts

Video content needs a text alternative that describes all meaningful information conveyed visually or aurally. This is so that anyone who cannot access content from a video is able to read a descriptive text transcript instead: that means all spoken words, meaningful sounds, as well as meaningful action within the video.

A transcript allows a:

• person to read the transcript and find out what’s in the content
• person to search for keywords in the content
• search engine to index the content.

The transcript must contain the full written version of the audible content and needs to:

• identify each speaker - names and roles / titles, eg ‘student’ or ‘teacher’
• identify noises, sounds or music
• Where appropriate, a description of what is happening (eg, what the person is doing, ie, cover the visual element for blind users).

When the business is ready to embed the video (i.e. they have the final version), they need to send this to [email protected]. They also need to send the .srt file.

Here’s more info re our Vimeo process: https://intranet.moe.govt.nz/technology-and-facilities/ict-services/web-services/video-requests-for-vimeo/

YouTube

We don’t upload Ministry videos to YouTube as we can’t control the adverts that pop up for users.