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.hesedvid.com/v1/thumbnail/org_01KAYN8RMNAEF0N243CYJCM9HR/env_A3TTAVN02AQHJTBLP7UTQ3V56ZYLNZ4/vid_K7VDWQKBCE06N0AK1O0LWDT2FQSS9A.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.hesedvid.com/v1/edge_EVNENCJS37003VO58NNFZQTMWG7S66YA9TUY78/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:

Client-Side Ad Insertion (CSAI)

Video.js supports Client-Side Ad Insertion (CSAI) using the videojs-ima plugin, which integrates Google’s IMA SDK.

Why Use videojs-ima?

The videojs-ima plugin handles:

• Loading and displaying VAST/VMAP ads
• Pre-roll, mid-roll, and post-roll ad scheduling
• Skip buttons and ad UI overlays
• Ad event tracking

Demo

This demo uses a Google sample VMAP tag with pre-roll, mid-roll, and post-roll ads:

Requirements

To add ads to Video.js, you need:

1. videojs-contrib-ads — The base ads framework for Video.js
2. videojs-ima — The Google IMA SDK integration plugin
3. Google IMA SDK — Loaded before your player code
4. A VMAP/VAST tag URL — From your ad server (e.g., Google Ad Manager)

Step 1: Install the Plugins

npm install videojs-contrib-ads videojs-ima

Step 2: Add the Scripts

1
<!-- Google IMA SDK (must be loaded first) -->
2
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
3

4
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
5
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
6

7
<!-- Ads plugins -->
8
<script src="path/to/videojs-contrib-ads.js"></script>
9
<script src="path/to/videojs-ima.js"></script>

Or with npm:

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

Step 3: Initialize the Player with Ads

const player = videojs('my-video', {
  controls: true,
  sources: [{
    src: 'https://your-video-url/master.m3u8',
    type: 'application/x-mpegURL'
  }]
});

// Initialize IMA plugin with your ad tag
player.ima({
  adTagUrl: 'https://your-ad-server.com/vmap-tag'
});

// Start ads on user interaction
player.on('play', () => {
  player.ima.initializeAdDisplayContainer();
  player.ima.requestAds();
});

Listening for Ad Events

player.on('ads-manager', (response) => {
  const adsManager = response.adsManager;
  console.log('Ads manager ready');
});

player.on('ads-request', () => {
  console.log('Ads requested');
});

player.on('ads-load', () => {
  console.log('Ads loaded');
});

player.on('ads-ad-started', () => {
  console.log('Ad started');
});

player.on('ads-ad-ended', () => {
  console.log('Ad ended');
});

Getting a VMAP Tag

Your ad server (like Google Ad Manager) generates VMAP URLs. For testing, you can use Google’s sample tags:

• Pre-roll only: https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=
• Pre + Mid + Post: https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpost&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator=