<hlsjs-iframe-slider-thumbnail> in a custom slider

A Video.js v10 UI component that shows scrubbing previews from a stream's HLS I-frame playlists, decoded by hls.js.

No skin: a <media-time-slider> built from parts, with the thumbnail positioned by the slider's --media-slider-pointer variable.

Code

<media-time-slider>
  <media-slider-track>
    <media-slider-fill></media-slider-fill>
  </media-slider-track>
  <hlsjs-iframe-slider-thumbnail></hlsjs-iframe-slider-thumbnail>
</media-time-slider>
hlsjs-iframe-slider-thumbnail {
  position: absolute;
  bottom: 100%;
  left: var(--media-slider-pointer);
  width: 200px;
  transform: translateX(-50%);
  opacity: 0;
}
media-time-slider[data-pointing] hlsjs-iframe-slider-thumbnail {
  opacity: 1;
}
hlsjs-iframe-slider-thumbnail[data-hidden] {
  display: none;
}

Install steps, including the required hls.js 1.7 override, and the full API are in the README on GitHub.