Web guides
Related guide

Using video on the Web

Index

Introduction

The Net is now realising its long-heralded potential as a video medium, and video's use has increased greatly across all age groups. It’s a powerful format, and the popularity of video-heavy sites like YouTube and Facebook mean its something many users expect to see.

As noted in our Time-based media under WCAG2.0 guide, video (and multimedia in general) has the potential to further open up the Web to many disabled users. On the other hand, inaccessible multimedia will lock them out. Because of this, this guide also draws attention to the web standards in this area. 

This guide is based on work by the Ministry of Education.

What works well on video?

Presentations and speeches

These include internal and external presentations or speeches and announcements. 

Uploaded video from a DVD or TV clip

Video material originally created for offline use can reach a wider audience on the web.

Anything that can be told as a story 

Examples:

Instructional guides - how to do something

Anything with a strong audio-visual element 

Types of video presentation

Be creative. Explore video sites and their categories, particularly ones that present similar types of material. As well as more traditional filming, consider the following options.

Flash movie with animated graphics

Example: edu2.0 (DotSub)

Video of a paper presentation

Fun to watch; quick and cheap to make. 

Example:  Social media in plain English (YouTube)

Screencast

This is essentially a movie of what a user sees on their monitor ad is good for demonstrating software. There are free programs you can use to create a screencast, as well as commercial products.

A presentation where items of interest are filmed

Filming images on a PC or chart on a wall is a cheaper option than editing in images. It also keeps the focus on the speaker.

A video with text added to reinforce the key messages

Example: Teaching and learning at Takapuna Grammar (TKI)

Key considerations

File formats, bandwidth and user devices

It is important to provide different options when you put your video on the web, so it can be accessed by people:

File formats

Popular media players include Windows Media Player (which is not cross-platform and will not play all file types by default), iTunes, Real Player and Quicktime (which are all cross-platform). Increasingly, video is being presented in Flash – eg, via an embedded Flash player. It is estimated that 98 to 99% of internet users have Flash.

Bandwidth

It is important to ensure your video is accessible for people with different connection speeds. People with fast internet may not appreciate having to wait for a video to download, while people on dial-up or with poor broadband are likely to find streaming video disjointed and frustrating. Therefore, you should:

  1. Provide a streaming version of the clip, and
  2. Let people know that if they are on dial-up or slow broadband, they can right-click on the link to download the video. (Alternatively, you could provide a downloadable version of the video clip on the page – but your page may become cluttered and confusing if you provide too many options.)

User devices

People may access your video using devices other than a desktop PC or notebook. Mobile phones, iPods, Palm pilots (and more) may be used to view your video. It may be useful to talk to your provider about options for these users.

Presenting video on launch pages

The following are options for presenting video information, links etc on a launch page.

Template example 1: Embedded Flash movie

In the method shown in this example, progressive enhancement is used to automatically provide a video option that best suits the user, based on the software they have installed:

JavaScript is used to detect whether a visitor has the right Flash plugin (and JavaScript).

Education for Enterprise [title]

Education for Enterprise builds on the unique perspectives, values and ideas that are part of our national identity, promoting leadership and innovation. (58 sec)

Transcript

  • Education for Enterprise (HTML) [link]

Template example 2: Non-embedded video

zoe zimmermann

How to use an RSS feed [title]

Video clip 1: Setting up an RSS reader

Length: 55 sec

Summary

Zoe Zimmermann explains how an RSS reader works and demonstrates how to set up an account in Google Reader.

Watch the video

  • Setting up an RSS reader (for Quicktime, iTunes, RealPlayer)
  • Setting up an RSS reader (for Windows Media Player)

Slow connection? We recommend downloading this video (right-click on the appropriate link or click on the link while holding down a modifier key: Windows = Alt, Mac = Command).

Transcript

  • Setting up an RSS reader (HTML) [link]

Download

  • Download a player (Technical help page) [link]

Notes:

Template example 3: Embedded YouTube video

In this example, the primary video is hosted on YouTube (which provides video in Flash format). The example below shows an embedded YouTube video; however, you can also provide a text link to the video if you prefer. See the information that follows for points to consider when using YouTube video.

dummy of youube embed for Te Matatini 2009 Kapa Haka festival

Te Matatini 2009 Kapa Haka festival [title]

Check out Tauira mai Tawhiti mai te rohe o Mataatua with their waiata tira...kia ora ra e te whanau! (Length: 2:17)

Transcript

[Text of transcript on same page (recommended) OR link to transcript (as below)]

Tauira mai Tawhiti mai te rohe o Mataatua’s waiata tira (HTML) [link]

Template example 4

In this example, the primary video is hosted on YouTube in Flash format.

dummy for picture for surfing video.

Surfing safety

Video clip 1: How to fall

Length: 2:17

Summary

Mike Tetherick demonstrates the art of the peaceful wipe out.

Watch the video at YouTube

Video: How to fall (Flash) [link]

Transcript

How to fall (HTML) [link]

Download

Download a Flash player (Technical help page) [link]

YouTube: Considerations 

There are some important things consider about YouTube.

"Technical help" information

Make sure your "Technical help" section or page has information about downloading media players. If you don’t have a technical help section, put the information at the bottom of the page the videos are on. However, it is best to have it in one place on the site, and link to it whenever you provide a video.

Dealing with long presentations

When putting a long presentation (eg, a TV programme or keynote speech) on the web, don’t try to put up one long video file. Consider one of the following:

Getting a web video from a DVD or TV clip

If you’re making a DVD or TV production (eg, an advertising clip), let the company know at the start of the project that you will also require clips for the web, in .wmv and .mp4 format. While a clip can probably be created from any playable source, it is likely to be more efficient to have your clips created from the source file, and you will be assured of a good quality result.

Presenting your video on the web in an engaging way

If you’re not using a video player, make use of images, extracts and quotes on your web page to present the video in a way that makes people want to find out more. (Get the company that produces the video to take about three still shots from the video during production for use on your webpage.) 

Example:

If you have time and budget, you could consider getting your web development company to make a Flash video ‘player’ that sits on your web page (the video is "embedded").

Making video accessible

Video must meet the web standards (see the Time-based media under WCAG2.0 guide). In most cases, a transcript and captions must be provided. In a few cases, audio descriptions must be added.

Captioning

Captions differ from subtitles. Subtitles are provided for visual people who speak a different language, while captions aim to describe all significant audio content – ie, spoken dialogue and non-speech information such as the identity of speakers and their manner of speaking, and music and sound effects.

Captions are not needed if the video presents no more information than is already presented in text (or in text alternatives – eg, alt text). In other words, if the video itself is an alternative format (eg, provided as an extra option for people with cognitive, language, or learning disabilities) then it does not need to be captioned.

Resources

Captioning instructions

Captioning Flash on YouTube

Captioning software

WCAG2.0 techniques

Online captioning

Closed captioning vs open captioning

Closed

The word "closed" in closed captioning indicates that not all viewers see the captions - only those who choose to decode or activate them. On the other hand, "open captions" (sometimes called "burned-in" or "hard-coded" captions) are visible to all viewers.
Example of closed captioning:

Example: Barack Obama (barackobama.com)

Open captioning

Open captions are a permanent part of the video. They can get blurry when the video is compressed. Use closed captioning where possible. If the video is to be hosted on a site where closed captioning is not possible, you may need to use open captioning.

Writing captions

Say who is talking:

Include significant audio:

Note tone any other relevant factors:

Length: Keep captions short: longer captions take too long to read and may display over several lines (so could obscure the picture).

Duration: Ensure the caption displays for long enough to be read. A short caption needs at least two seconds.

Formatting: Use a font, colour and size that will render well onscreen and be legible against the background. Avoid italics BUT if you decide to use it, choose a font with a true italic style rather than slanted text (which can get pixellated). Think about where the captions will best be positioned – don’t necessarily go with the default positioning.

Transcripts

General tips

Example transcript

A ‘hot extraction’ of a soldier from the jungle – interview with Brian Senn (New Zealand History Online)

Automatically-generated transcripts

Sometimes voice/speech recognition software can be used during video production to make a transcript. However, this is likely to be effective only if there is just one person talking. Talk to the company that is producing your video about this. Make sure you check a software-generated transcript carefully.

Producing a video

Talking with your provider

Consider asking your provider to include the following information in the video itself:

Setting up the studio

It is important to consider the background before you start videoing – even if the video is being shot by professionals or made in a professional studio.

Acceptance of the final product

When you get your video clips from the provider:

Privacy

Respect the rights and privacy of people you are having filmed, even if they are in the background. Make sure you have permission from everyone that appears, to use them in the video. This is particularly important for children – get permission from their parents or guardians.

When seeking permission:

Use a permissions template (your Communications team may be able to help with this) to record the information.

File the permission form as part of the video record.

Managing digital assets

Video files are a valuable resource and it’s important to consider carefully how they will be stored and managed. Specialist companies may have established facilities where they can store material for you; talk to them about this at the start of a project – ask questions about where the material is stored, how long they keep it for, how they retrieve it (metadata) and what the costs are.

If you use a company that does not have storage facilities, ensure you get a copy of the original file from them as well as the final output. You agency should have an agreed practice for storing this type of material, which everyone follows.

An important consideration when looking at storing video material internally is capacity. Video files can be large and when there is an increasing number of them, they can require an alarming amount of file space. It is recommended that you talk to your agency’s records group and IT team about possible solutions.