Get started

Follow the Player setup if needed, then add an ID to your player:

<chunkify-player
  id="player"
  src="https://media.example.com/videos/manifest.m3u8"
  crossorigin="anonymous"
  aspect-ratio="landscape"
  controls
  playsinline
></chunkify-player>

In your browser entry file, attach analytics after the component is registered:

import '@chunkify/player';
import { monitor } from '@chunkify/player-analytics';

await customElements.whenDefined('chunkify-player');
const player = document.querySelector('#player');
if (!player) throw new Error('Missing #player element');

const destination = { send: (event) => console.log(event) };
const session = monitor(player, {
    videoId: 'ast_3Ljtoej7c3Y1plabZoElbQwdwLh',
    destinations: [destination],
});

monitor() follows the player's active media element when it switches between HLS and regular video files.

With the Chunkify Player React wrapper, use a stable ref callback to attach analytics when the player mounts. React 19 calls the returned cleanup when it unmounts.

'use client';

import { useCallback } from 'react';
import {
    ChunkifyPlayer,
    type ChunkifyPlayerRef,
} from '@chunkify/player-react';
import { monitor, type AnalyticsDestination } from '@chunkify/player-analytics';

export default function Video() {
    const attachAnalytics = useCallback((player: ChunkifyPlayerRef | null) => {
        if (!player) return;

        const destination: AnalyticsDestination = {
            send: (event) => console.log(event),
        };
        const session = monitor(player, {
            videoId: 'ast_3Ljtoej7c3Y1plabZoElbQwdwLh',
            destinations: [destination],
        });

        return () => session.destroy();
    }, []);

    return (
        <ChunkifyPlayer
            ref={attachAnalytics}
            src="https://media.example.com/videos/manifest.m3u8"
            crossOrigin="anonymous"
            aspectRatio="landscape"
            controls
            playsInline
        />
    );
}

monitor() also accepts a native <video> element. For example, add an MP4 video to your page:

<video
  id="player"
  src="https://media.example.com/videos/video.mp4"
  controls
  playsinline
></video>

Attach analytics in your browser entry file:

import { monitor } from '@chunkify/player-analytics';

const video = document.querySelector('video#player');
if (!video) throw new Error('Missing video#player element');

const destination = { send: (event) => console.log(event) };
const session = monitor(video, {
    videoId: 'ast_3Ljtoej7c3Y1plabZoElbQwdwLh',
    destinations: [destination],
});

Use monitorHlsJs() with the Hls instance that manages your video. Attach analytics before loading the stream. This example assumes your page has <video id="player" controls playsinline></video>.

import Hls from 'hls.js';
import { monitorHlsJs } from '@chunkify/player-analytics';

const video = document.querySelector('video#player');
if (!video) throw new Error('Missing video#player element');
if (!Hls.isSupported()) throw new Error('hls.js is not supported in this browser');

const hls = new Hls();
const destination = { send: (event) => console.log(event) };
const session = monitorHlsJs(hls, {
    videoId: 'ast_3Ljtoej7c3Y1plabZoElbQwdwLh',
    destinations: [destination],
});

hls.attachMedia(video);
hls.loadSource('https://media.example.com/videos/manifest.m3u8');

Call session.destroy() before destroying the Hls instance. Use session.sourceChanged() when replacing the source for the same monitored video.

With a Video.js 10 HTML player already configured, pass its HLS media element to monitorVideoJs(). It accepts <hlsjs-video>, <hls-video>, and <native-hls-video>.

For a player using <hlsjs-video>, add this to your browser entry file:

import { monitorVideoJs } from '@chunkify/player-analytics';

await customElements.whenDefined('hlsjs-video');
const media = document.querySelector('hlsjs-video');
if (!media) throw new Error('Missing hlsjs-video element');

const destination = { send: (event) => console.log(event) };
const session = monitorVideoJs(media, {
    videoId: 'ast_3Ljtoej7c3Y1plabZoElbQwdwLh',
    destinations: [destination],
});

The connector targets Video.js 10's HTML media components. Pass the media element inside the player. For a plain <video>, use the HTML video example.

Use monitorShaka() after attaching Shaka to the video and before calling load(). This example assumes your page has <video id="player" controls playsinline></video>.

import shaka from 'shaka-player';
import { monitorShaka } from '@chunkify/player-analytics';

shaka.polyfill.installAll();
const video = document.querySelector('video#player');
if (!video) throw new Error('Missing video#player element');
if (!shaka.Player.isBrowserSupported()) {
    throw new Error('Shaka Player is not supported in this browser');
}

const player = new shaka.Player();
await player.attach(video);

const destination = { send: (event) => console.log(event) };
const session = monitorShaka(player, {
    videoId: 'ast_3Ljtoej7c3Y1plabZoElbQwdwLh',
    destinations: [destination],
});

try {
    await player.load('https://media.example.com/videos/manifest.m3u8');
} catch (error) {
    console.error('Could not load the video', error);
}

Shaka starts a view when it loads a source. Call session.destroy() before destroying the Shaka player.

See Shaka's setup guide for its player configuration.