Skip to content

Commit bcdc474

Browse files
terrillterrill
committed
Add support for data-transcript-src
1 parent cbbe99b commit bcdc474

22 files changed

+1398
-1002
lines changed

‎README.md‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Features
2020
- Support for text-based audio description, also using WebVTT. At designated times, the description text is read aloud by screen readers. Users can optionally set their player to pause when audio description starts in order to avoid conflicts between the description and program audio.
2121
- Support for audio description as a separate video. When two videos are available (one with description and one without), both can be delivered together using the same player and users can toggle between the versions.
2222
- Support for adjustable playback rate. Users who need to slow down the video in order to better process and understand its content can do so; and users who need to speed up the video in order to maintain better focus can do so.
23-
- An interactive transcript feature, built from the WebVTT caption and description files as the page is loaded. Users can click anywhere in the transcript to start playing the video (or audio) at that point. Keyboard users can also choose to keyboard-enable the transcript, so they can tab through its content one caption at a time and press enter to play the media at the desired point.
23+
- An interactive transcript feature, built from the WebVTT chapter, caption and description files as the page is loaded. Users can click anywhere in the transcript to start playing the video (or audio) at that point. Keyboard users can also choose to keyboard-enable the transcript, so they can tab through its content one caption at a time and press enter to play the media at the desired point.
2424
- Automatic text highlighting within the transcript as the media plays. This feature is enabled by default but can be turned off if users find it distracting.
2525
- Support for playing YouTube videos within the Able Player chrome.
2626
- Customizable caption display. Users can control the font style, size, and color of caption text; plus background color and transparency; all from the Preferences dialog. They can also choose to position captions *below* the video instead of the default position (an semi-transparent overlay).
@@ -213,14 +213,34 @@ The following attributes are supported on both the `<audio>` and `<video>` eleme
213213

214214
#### Transcript
215215

216-
- **data-transcript-div** - optional; id of an external div in which to display the interactive transcript.
217-
The transcript is generated automatically if captions and/or descriptions are available.
218-
If this attribute is not provided the transcript will be displayed in its default container
219-
adjacent to the player.
220-
- **data-use-transcript-button** - optional; set to "false" to exclude transcript button from controller. If using the data-transcript-div attribute to write the transcript to an external container (e.g., on a dedicated transcript page), you might not want users to be able to toggle the transcript off.
216+
Able Player can automatically generate an accessible interactive transcript from the chapters, captions, and descriptions tracks. There are three types of interactive transcripts supported:
217+
- "external" - Automatically generated, written to an external div (requires **data-transcript-div**)
218+
- "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button on the controller
219+
- "manual" - A manually coded external transcript (requires **data-transcript-src**)
220+
221+
The following attributes control which of the above types, if any, are generated:
222+
- **data-transcript-div** - optional; id of an external div in which to display an interactive transcript.
223+
- **data-transcript-src** - optional; id of an external div that contains a pre-existing manually coded transcript. Able Player will parse this transcript and interact with it during playback.
224+
- **data-include-transcript** - optional; set to "false" to exclude transcript button from controller.
225+
226+
If none of the above attributes are present, the transcript will be displayed in a draggable, resizable popup that can be toggled on/off using a button on the controller. Note that a toggle button is added to the controller *only* if the transcript is a "popup" type; there is no toggle button for either the "external" or "manual" transcript types.
227+
228+
Additional transcript-related attributes include:
221229
- **data-transcript-title** - optional; override default transcript title (default is "Transcript", or "Lyrics" if the data-lyrics-mode attribute is present)
222230
- **data-lyrics-mode** - optional; forces a line break between and within captions in the transcript
223231

232+
To manually code the transcript, one simple strategy is to first allow Able Player to *automatically* generate a transcript. Then copy and paste its content as a starting point. To manually code a transcript from scratch, use the following markup (see [Video Demo #7] for an example):
233+
234+
- Wrap the entire transcript in a container with class="able-transcript", and wrap that in another container with class="able-transcript-area".
235+
- Add an empty &lt;div&gt; just inside the outer container with class="able-window-toolbar".
236+
- Wrap all audio description in a &lt;div&gt; element with class="able-desc".
237+
- Add a &lt;span&gt; element to the start of each audio description block, with class="able-hidden" and text "Description:". This helps screen reader users to distinguish between caption and description text.
238+
- Wrap each interactive block of content in a &lt;span&gt; element, with class="able-transcript-seekpoint", plus **data-start** and **data-end** attributes. The values of these two data attributes are the video start and end times extpressed in seconds (decimals points are allowed).
239+
- Wrap each interactive block of content in a &lt;span&gt; element, with class="able-transcript-seekpoint", plus **data-start** and **data-end** attributes. The values of these two data attributes are the video start and end times extpressed in seconds (decimals points are allowed).
240+
- If the clickable span is caption text, also add the "able-transcript-caption" class.
241+
- Wrap unspoken content such as names of speakers or descriptions of sound in a &lt;span&gt; element with class="able-unspoken".
242+
- Use any other markup desired to add structure and style to your transcript. Able Player will ignore it.
243+
224244
#### Chapters
225245

226246
- **data-chapters-div** - optional; id of an external div in which to display a list of chapters.
@@ -439,7 +459,7 @@ on the `<video>` element. The value of this attribute must be the video's 11-cha
439459

440460
If a described version of the video is available on YouTube, include a **data-youtube-desc-id** attribute
441461
on the `<video>` element. The value of this attribute must be the 11-character YouTube ID
442-
of the described version. If users turn on the Description button on their player control bar,
462+
of the described version. If users turn on the Description button on their player controller,
443463
the described version of the video will be loaded instead of the non-described version.
444464

445465
Starting with 2.3.1, a YouTube Data API key is required for playing YouTube videos in Able Player.
@@ -599,6 +619,7 @@ Files created by the build process are put into the */build* directory:
599619
[Modernizr]: http://modernizr.com/
600620
[npm]: https://www.npmjs.com/
601621
[Signing Books for the Deaf]: http://www.sign-lang.uni-hamburg.de/signingbooks/
622+
[Video Demo #7]: demos/video7.html
602623
[WebVTT validator]: https://quuz.org/webvtt/
603624
[WebAIM’s 2014 Screen Reader User Survey]: http://webaim.org/projects/screenreadersurvey5/#browsers
604625
[WebVTT]: https://w3c.github.io/webvtt/

0 commit comments

Comments
 (0)