Skip to main content

广告插件

演示​

👉 查看完整演示

安装​

通过 npm 安装：​

$ npm install artplayer-plugin-ads

通过 yarn 安装：​

$ yarn add artplayer-plugin-ads

通过 script 安装：​

<!-- 本地 -->
<script src="path/to/artplayer-plugin-ads.js"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>

然后你可以通过 window.artplayerPluginAds 访问到插件函数

使用​

▶ Run Code
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    autoSize: true,
    fullscreen: true,
    fullscreenWeb: true,
    plugins: [
        artplayerPluginAds({
            // html广告，假如是视频广告则忽略该值
            html: '<img src="/assets/sample/poster.jpg">',

            // 视频广告的地址
            video: '/assets/sample/test1.mp4',

            // 广告跳转网址，为空则不跳转
            url: 'http://artplayer.org',

            // 必须观看的时长，期间不能被跳过，单位为秒
            // 当该值大于或等于totalDuration时，不能提前关闭广告
            // 当该值等于或小于0时，则随时都可以关闭广告
            playDuration: 5,

            // 广告总时长，单位为秒
            totalDuration: 10,

            // 视频广告是否默认静音
            muted: false,

            // 多语言支持
            i18n: {
                close: '关闭广告',
                countdown: '%s秒',
                detail: '查看详情',
                canBeClosed: '%s秒后可关闭广告',
            },
        }),
    ],
});

art.on('artplayerPluginAds:click', (ads) => {
    console.info('广告被点击', ads);
});

art.on('artplayerPluginAds:skip', (ads) => {
    console.info('广告被跳过', ads);
});