Video & Audio Players

Component Styles

7-5

7 Columns
7 Columns

5-7

7 Columns
7 Columns

6-6

6 Columns
6 Columns

Centered 10

1 Column
1 Column
1 Col
1 Col

Component Details

General Requirements

  • Each piece of audio and video content should live on its own page. Do not combine multiple videos or podcasts on a page. The surrounding text provides important context for the audio or video piece, while calls to action and "share" buttons give users a path forward after consuming content.
  • Placement

    Embed the media player directly on the page. Avoid launching a video or audio player in a modal, as it is unlikely to provide a good experience for mobile users or users with disabilities.
  • Alternative formats

    Closed captions provide users with equivalent text that's synchronized with the audio. Transcripts are a textual version of audio content that contain additional explanations of the audio. All videos should have closed captions to make them accessible to hearing-impaired users. Provide a transcript for audio-only content, and when possible, include a transcript in addition to closed captions for video. Closed captions can be generated from a transcript of the video or audio. Avoid automatically generated closed captions, which are not an accurate alternative to listening to the content, and create a text track for closed captions.
  • Test content in more than one browser to ensure users can navigate to the player with their keyboard. HTML5 media players support keyboard navigation and other accessibility features. As browsers phase out support for Flash , converting content from Flash to HTML5 benefits users with disabilities.

Audio Requirements

  • A podcast is a sequence of audio recordings, similar to a radio show. For recordings on educational topics, use an audio library.
  • Include a high-resolution image file for the preview image in the embedded player, also called the key frame, to show users what to expect from the content. The key frame will be displayed while the podcast plays. Do not include critical information exclusively in the keyframe, as it will not be read by screen readers.

Video Requirements

  • Include a high-resolution image file for the key frame. If no image file is provided, a lower-resolution capture for the key frame will be automatically selected by Limelight. Do not include critical information exclusively in the keyframe, as it will not be read by screen readers.
  • Embed Limelight videos using the Limelight HTML Player, also called SmartEmbed . This ensures that the video can be played on all browsers and operating systems.