Video.js kit is a build of Video.js 7 with Mux features included:

• Timeline hover previews
• Mux Data, through the videojs-mux plugin
• A playback_id helper that builds the full playback URL for you

The source code is on GitHub at muxinc/videojs-mux-kit.

Install Video.js kit

npm install @mux/videojs-kit

Import the JavaScript and CSS:

import videojs from '@mux/videojs-kit';
import '@mux/videojs-kit/dist/index.css';

Or use the hosted versions from jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/@mux/videojs-kit@latest/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mux/videojs-kit@latest/dist/index.css">

Add a <video> element with your playback ID as the source and video/mux as the type:

<video
  id="my-player"
  class="video-js vjs-16-9"
  controls
  preload="auto"
  width="100%"
  data-setup='{}'
>
  <source src="{PLAYBACK_ID}" type="video/mux" />
</video>

Video.js kit uses hls.js by default. To use Video.js's default playback engine instead (version 0.8.0 and later), import @mux/videojs-kit/dist/index.vhs.js.

Configure Video.js kit

Set options in data-setup, or pass them when you initialize the player with JavaScript:

<video id="my-player" class="video-js vjs-16-9" controls preload="auto" width="100%"></video>

<script>
const player = videojs('my-player', {
  timelineHoverPreviews: true,
  plugins: {
    mux: {
      debug: false,
      data: {
        env_key: 'ENV_KEY',
        video_title: 'Example Title'
      }
    }
  }
});

player.src({
  src: '{PLAYBACK_ID}',
  type: 'video/mux',
});
</script>

• timelineHoverPreviews: true turns on timeline hover previews.
• plugins.mux turns on Mux Data. The videojs-mux plugin is included, so you don't need to install it separately. See Monitor Video.js for metadata.

Get your ENV_KEY from the Mux environments dashboard.

Signed URLs in Video.js kit

Signed playback is supported from v0.3.0. Append the playback token to the playback ID as the source:

player.src({
  src: '{PLAYBACK_ID}?token={JWT_VIDEO_TOKEN}',
  type: 'video/mux',
});

Video.js kit can't build the signed storyboard URL for timeline hover previews. Leave timelineHoverPreviews unset and pass the full storyboard URL instead, either as the timelineHoverPreviewsUrl option or with player.timelineHoverPreviews():

player.timelineHoverPreviews({
  enabled: true,
  src: 'https://image.mux.com/{PLAYBACK_ID}/storyboard.vtt?token={JWT_STORYBOARD_TOKEN}'
});

To turn hover previews off, call player.timelineHoverPreviews({ enabled: false }).

Quality selector in Video.js kit

From v0.10.0, Video.js kit includes the [videojs-contrib-quality-levels][] and [videojs-http-source-selector][] plugins. They're off by default. Turn the selector on with "httpSourceSelector": {} in the plugins option, or call player.httpSourceSelector().

Use other Video.js plugins with Video.js kit

Video.js kit uses Video.js's core.js build. If another Video.js plugin doesn't load, point video.js at the same build in your bundler. For example, with webpack's resolve.alias:

config.resolve = {
  alias: {
    'video.js': 'video.js/core',
  }
};

Video.js kit release notes

videojs('mux-default', {
  html5: {
    hls: {
      capLevelToPlayerSize: true
    }
  }
});