@dolby-optiview/ads-sdk-adapter-hlsjs
HLS.js PlayerAdapter for the OptiView Ads SDK. It connects an Hls
instance and its <video> element to the SDK core, either as the content
player or as the ad player.
@dolby-optiview/ads-sdk already depends on this package and uses it for its
default ad player; install it directly only when you use
@dolby-optiview/ads-sdk-core on its own.
Installation
npm install @dolby-optiview/ads-sdk-core @dolby-optiview/ads-sdk-adapter-hlsjs hls.js
hls.js 1.x is a peer dependency.
Usage
import Hls from 'hls.js';
import { OptiViewAds } from '@dolby-optiview/ads-sdk-core';
import { HlsJsAdapter } from '@dolby-optiview/ads-sdk-adapter-hlsjs';
const video = document.getElementById('video') as HTMLVideoElement;
const hls = new Hls();
hls.attachMedia(video);
const sdk = new OptiViewAds({
player: new HlsJsAdapter(hls, video),
container: document.getElementById('container')!,
createAdAdapter: (adContainer) => {
const adVideo = document.createElement('video');
adContainer.appendChild(adVideo);
const adHls = new Hls();
adHls.attachMedia(adVideo);
return new HlsJsAdapter(adHls, adVideo);
},
});
await sdk.startSession({
manifestUrl: 'https://manifest.example.com/v1/your-org/channels/your-channel',
});
hls.loadSource('https://example.com/content.m3u8');
video.play();
The adapter forwards HLS.js program date time and ID3 metadata to the core, so breaks are scheduled against the stream timeline without extra configuration.
Documentation
- OptiView Ads SDK documentation
- Entry package:
@dolby-optiview/ads-sdk