Home

Plans & Pricing Get Started Login

About 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 file, a transcript, WebVTT 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

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



step 1 create a webvtt file


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.





step 2Check if your WebVTT file is validated

Use the WebVTT Validator to check your file.


Step 3 Prepare your Able Player code


Step 4 Add the track 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"/>

    Add this inside track kind captions src file.vtt if you want to...Add multiple languages src file_en.vtt srclang en label English. Means there are English captions available for the video. for multiple videos repeat the code. or to Change the position of the captions add data captions position and set equal to below or overlay. By default, captions are positioned


    Step 5 A CC button will appear on the video player



Jump to Top

Adding Audio Description to Able Player

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.

step 1 create a description webvtt file.

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.





step 2Check if your WebVTT file is validated

Use the WebVTT Validator to check your file.


Step 3 Prepare your Able Player code


step 4 add the description track 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"/>


A D BUTTON WILL SHOW UP ON THE PLAYER ONCE THE DESCRIPTIONS HAVE BEEN EMBEDDED.


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.


PREPARE YOUR ABLE PLAYER CODE


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.


A D BUTTON WILL SHOW UP ON THE PLAYER ONCE THE DESCRIPTIONS HAVE BEEN EMBEDDED.


Jump to Top

Adding an Interactive Transcript to Able Player

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>

Jump to Top