@dolby-optiview/ads-sdk
Web entry package of the OptiView Ads SDK: server-guided and manifest-driven
dynamic ad insertion for HLS.js, Shaka Player and THEOplayer, with a bundled
default ad player (HLS.js, native <video> fallback for Safari and iOS).
Installation
npm install @dolby-optiview/ads-sdk hls.js
hls.js 1.x is a peer dependency. The package depends on
@dolby-optiview/ads-sdk-core and @dolby-optiview/ads-sdk-adapter-hlsjs
and pulls them in automatically.
Quick start
import Hls from 'hls.js';
import { OptiViewAds, HlsJsAdapter } from '@dolby-optiview/ads-sdk';
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')!,
});
sdk.addEventListener('adbreakbegin', (e) => console.log('Ad break started', e.break.id));
sdk.addEventListener('adbreakend', (e) => console.log('Ad break ended', e.break.id));
await sdk.startSession({
manifestUrl: 'https://manifest.example.com/v1/your-org/channels/your-channel',
});
hls.loadSource('https://example.com/content.m3u8');
video.play();
container is the element that anchors the ad overlay; your player UI sits
inside it. Start one session per channel or piece of content and call
sdk.endSession() on channel change or stop; call sdk.destroy() when the
player is torn down.
Other content players
OptiViewAds from this package uses the default ad player. Pass your own
createAdAdapter factory to drive the ads with Shaka Player or THEOplayer
instead, using @dolby-optiview/ads-sdk-adapter-shaka or
@dolby-optiview/ads-sdk-adapter-theoplayer.
AI assistance
The package ships knowledge files and skills for IDE assistants:
npx dolby-ads-init-ai # writes ./.dolby-ads/ai
Documentation
- OptiView Ads SDK documentation
- Related packages:
@dolby-optiview/ads-sdk-core,@dolby-optiview/ads-sdk-adapter-hlsjs,@dolby-optiview/ads-sdk-adapter-shaka,@dolby-optiview/ads-sdk-adapter-theoplayer,@dolby-optiview/ads-sdk-react-native