@edwardsharp/a-player v0.0.25

github.com/edwardsharp/a-player
npmjs.com/package/@edwardsharp/a-player
webcomponents.org/element/@edwardsharp/a-player

Usage

include these:
  <script src="https://content.jwplatform.com/libraries/IDzF9Zmk.js"></script>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js"></script>
  <script src="https://unpkg.com/@edwardsharp/a-player@0.0.25/dist/main.bundle.js"></script>
  
override some styles, if you want. make sure to include these after <script src="main.bundle.js"></script>.
see index.scss for refernce
  LIGHT THEME
  <style>
    .transcript span.current {
      background: #0095D6;
      color: white;
    }
    .transcript span:not(.current):hover {
      color: #0095D6;
    }
    .searchbox input {
      border: thin solid gray;
    }
    /* search results */
    .transcript span em.current {
      background: red;
      color: white;
    }
  </style>

  DARK THEME
  <style>
    .sidebar {
      background-color: black;
      color: white;
    }
    .sidebar h3 {
      color: white;
    }
    .searchbox input {
      color: black;
      background-color: white;
    }
    .transcript p {
      color: white;
    }
    .transcript span {
      color: white;
    }
    .transcript span.current {
      background: #ff6600;
      color: black;
    }
    .transcript span:not(.current):hover {
      color: #ff6600;
    }
    .transcript span em {
      background: #666;
      color: white;
    }
    .transcript span em.current {
      background: #ff0046;
    }
    .transcript h4 {
      color: white;
    }
  </style>
  
and use like so:
  <a-player 
    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"
  ></a-player>
  
Options
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 (dark theme)

Demo (light theme)