m3u8-ad-js-sdk

Coolita OS Web 使用的m3u8 广告SDK插件库

安装

yarn add @coolita-os/m3u8-ad-js-sdk or npm install --save @coolita-os/m3u8-ad-js-sdk

使用

一、在需要插入广告的节点添加广告节点元素和样式控制

<video
    style="display: none;"
    class="ad-video"
    id="ad-video">
</video>

    .ad-video {
        width: 100%;
        height: 100%;
        object-fit: cover; // 保持原有尺寸比例。但部分内容可能被剪切。
    }

二、JavaScript/TypeScript 调用实现部分

import { M3u8AdPlayer } from '@coolita-os/m3u8-ad-js-sdk'

// 创建广告播放器实例，内部实现自动调用requestAd()发起广告请求等其他逻辑
let m3u8AdPlayerInstance = new M3u8AdPlayer({
    adVideoElement: document.getElementById('ad-video'), // 广告节点元素
    contentElement: null, // 内容推荐位节点元素video/div，没有传null
    adContainerElement: document.getElementById('ad-container'), // 广告UI容器元素
    adUIElement: document.getElementById('ad-ui'), // 广告UI元素/没有传null
    adTagUrl: '', // 广告请求tagUrl
    bitrate: 300, // 广告比特率
    muted: true, // 是否静音，默认静音
    observeVideoSize: true, // 是否监听视频窗口大小变化做处理
    instanceApi: { // 实例需要实现的所有回调函数
        onStarted: () => { 
            // 即将开始播放
        },
        onAdErrorEvent: (errorData) => {
            // 广告播放发送异常
        }
    }
})

2、销毁广告播放器实例

    m3u8AdPlayerInstance.destroy()
    m3u8AdPlayerInstance = null