Using Video.js

Quickstart

Video.js is a popular open-source video player with a large plugin ecosystem. It has built-in HLS support and works across all modern browsers.

Add your HTML

Video.js uses a video element with a specific class. The key parts:

1. The aspect ratio in the container style tells the browser what size the video should be
2. The poster is your thumbnail and data-src is your HLS stream URL
3. The video-js class tells Video.js to initialize this element

1
<div style="width:100%; position:relative; aspect-ratio:16/9; background:#000;">
2
  <video
3
    id="my-video"
4
    class="video-js vjs-default-skin vjs-big-play-centered"
5
    poster="https://worker.antcdn.net/v1/thumbnail/{edgeKey}.png?width=1920&timeStamp=30"
6
    controls
7
    playsinline
8
    preload="auto"
9
    style="position:absolute; inset:0; width:100%; height:100%;"
10
  >
11
    <source
12
      src="https://worker.antcdn.net/v1/{edgeKey}/master.m3u8"
13
      type="application/x-mpegURL"
14
    />
15
  </video>
16
</div>

Add your JavaScript

Video.js is straightforward to initialize. It automatically detects HLS streams and handles playback.

import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const player = videojs('my-video', {
  controls: true,
  responsive: true,
  fluid: false,
});

// Optional: Handle errors
player.on('error', () => {
  console.error('Video.js error:', player.error());
});

Demo Video

Here’s what Video.js looks like with default controls:

Ads (optional)

If you need client-side ad insertion, use Video.js’s ad plugin ecosystem (e.g. videojs-ima). Keep ad logic separate from your AntCDN playback URL; the playback URL stays https://worker.antcdn.net/v1/{edgeKey}/master.m3u8 (plus ?jwt=... for private).