@edwardsharp/a-player v0.0.25

Usage

  <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>
  

  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>
  

  <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>
  

Demo (dark theme)

Demo (light theme)