How to Add Audio Description, Captions, Interactive Transcript to Able Player

Able Player is a “fully accessible cross-browser HTML 5 media player.”

The player supports both audio and video. With Able Player, you can easily add captions, descriptions, and transcripts to your videos to make them more accessible.

Able Player uses WebVTT files for captioning and describing. You can create your own file, or upload your video for captioning and audio description with 3Play Media. Once your file is processed, you can download as a WebVTT caption filea transcriptWebVTT description file, or if you want audio descriptions via a separate video, you can select to download them as an mp4, or other video sources.

Adding Closed Captions to Able Player

Back to Top

Step 1: Create a WebVTT Caption File

Able Player uses validated Web Video Text Tracks (WebVTT) for captioning. Captions are added using the <track> element.

A “Web Video Text Track” file, or WebVTT (.vtt), is a format that displays time text tracks for HTML5 videos with the tag element.

You can either create a WebVTT file, or upload your video to 3Play Media for captioning, then download a WebVTT version of the captions.

able player step 1

Step 2: Check If Your WebVTT File Is Validated

Use the WebVTT Validator to check your file.

able player step 2

Step 3: Prepare Your Able Player Code

able player step 3

Step 4: Add the Tag

Add the following code to your Able Player code, replacing “path_to_captions.vtt” with your WebVTT caption file:
<track kind="captions" src="path_to_captions.vtt"/>

step 4b

able player step 4

Step 5: The CC Button

A CC Button will appear on the video player

able player step 5

Adding Audio Description to Able Player

Back to Top

Step 1: Create a WebVTT Description File

There are two ways to publish audio descriptions on Able Player: through a <track> element or through a separate video with the description mixed in.

A WebVTT description file contains description text written with a ARIA role=“alert”.

You can either create a WebVTT file, or upload your video to 3Play Media for description, then download a WebVTT version of the descriptions.

able player step 1

Step 2: Check If Your WebVTT File Is Validated

Use the WebVTT Validator to check your file.

able player step 2

Step 3: Prepare Your Able Player Code

able player step 3

Step 4: Add the Tag

Add the following code to your Able Player code, replacing “path_to_description.vtt” with your description WebVTT file name:

<track kind="captions" src="path_to_description.vtt"/>

able player step 4

Step 5: The D Button

A D button will appear on the video player.

able player step 5

Step 1: Create a Separate Video With Audio Description Mixed Into the Audio

If you have multiple video sources (like MP4 or WebM), you will need to create a file for each appropriate format. If you upload your video to 3Play Media for description, then you can download a description file in any video source that you require, like mp4.

able player step 1

Step 2: Prepare Your Able Player Code

able player step 2

Step 3: Add the data-desc-src Attribute

Add the following code to you Able Player code:
data-desc-src="NameOfVideo"

The final code should look like this:

<videoid="video1"preload="auto"width="480"height="360"poster="../media/wwa.jpg"data-able-player> 
<sourcetype="video/webm"src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm"/> 
<sourcetype="video/mp4"src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4"/>

Note: This example includes two separate video files for WebM and mp4.

able player step 3

Step 5: The D Button

A D button will appear on the video player.

able player step 5

Adding an Interactive Transcript to Able Player

Back to Top

An interactive transcript is an engaging way to retain viewers. The transcript plays along with the video, while each word is highlighted in real-time as they are being spoken. In addition, users can search within the transcript, then click on a word and skip to that corresponding point in the video.

To do this, Able Player uses the chapters, captions, and description files of the page to write out an automated transcript.

There are three types of transcripts: external, manual, and popup.

external container
Use the following code to have an automated transcript appear in a separate box to the right of the video player.

data-transcript-div="transcript"

The final code should look like this:

<main role="main">
  <div id="player">
    <video id="video1" preload="auto" width="480" height="360" poster="../media/wwa.jpg" data-able-player  data-transcript-div="transcript">
      <source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm"/>
      <source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4"/>
      <track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English"/>
      <track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"/>
      <track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"/>
    </video>
  </div>
  <div id="transcript"></div>
</main>

</body>
</html>

manual transcript
If you’ve created your own transcript, or if you captioned/described your videos with 3Play, you can still use it on the Able Player! Use the following code if you have your own transcript. This will appear in a separate box to the right of the video player.

data-transcript-src="NameOfTranscript"

If you used 3Play Media file to caption and describe your video, simply download a transcript version of the video, then replace “NameOfTranscript” with your transcript file name.

The final code should look like this:

<main role="main">
  <div id="player">
    <video id="video1" preload="auto" width="480" height="360" poster="../media/wwa.jpg" data-able-player  data-transcript-src="NameOfTranscript">
      <source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm"/>
      <source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4"/>
      <track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English"/>
      <track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"/>
      <track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"/>
    </video>
  </div>
</main>

</body>
</html>

popup
Use this code to have an automated transcript appear as a draggable and resizable popup with on/off buttons.

data-include-transcript

Make sure to include the external transcript code as well. The final code should look like this:

<main role="main">
  <div id="player">
    <video id="video1" preload="auto" width="480" height="360" poster="../media/wwa.jpg" data-able-player data-transcript-div="transcript" 
data-include-transcript>
      <source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm"/>
      <source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4"/>
      <track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English"/>
      <track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"/>
      <track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"/>
    </video>
  </div>
  <div id="transcript"></div>
</main>

</body>
</html>