a-player

demo: https://edwardsharp.github.io/a-player/
https://www.webcomponents.org/element/@edwardsharp/a-player

Web Component for rendering videos with accessible captions (& other nifty things) via JWPlayer

based on the JWPlayer interactive-transcripts demo: https://github.com/jwplayer/jwdeveloper-demos/tree/developer-showcase/demos/innovation/interactive-transcripts

usage

npm install --save @edwardsharp/a-player (or use UNPKG!)

include these:

``html



`

override some styles, if you want. make sure to include these after .

`html

`

$3

| Option | Required | Default |
| ---------------------------|:--------:| -----------:|
|file | * | |
|captions-file | | '' |
|captions-file-label | | 'Default' |
|chapters-file | | '' |
|thumbnails-file | | '' |
|audio-description-file | | '' |
|audio-description-file-type | | 'audio/mp3' |
|image | | '' |
|display-title | | false |
|width | | 320 |
|height | | 180 |
|captions-color | | #ffffff |
|captions-bg | | #000000 |
|captions-bg-opacity | | 75 |
|captions-font-size | | 15 |
|mute | | false |
|volume | | 100 |
|autostart | | false |
|show-transcripts | | false |
|show-search | | false |

Demo:


`html
autoplay="false"
height="225"
width="400"
file="//content.jwplatform.com/manifests/3p683El7.m3u8"
image="//content.jwplatform.com/thumbs/3p683El7-640.jpg"
chapters-file="//raw.githubusercontent.com/jwplayer/jwdeveloper-demos/master/demos/innovation/interactive-transcripts/assets/chapters.vtt"
captions-file="//raw.githubusercontent.com/jwplayer/jwdeveloper-demos/master/demos/innovation/interactive-transcripts/assets/captions.vtt"
thumbnails-file="//content.jwplatform.com/strips/3p683El7-120.vtt"
captions-color="#000"
captions-bg="#ff0404"
captions-bg-opacity="100"
captions-font-size="25"
>
`

$3

`html



```