Artplayer - 轻量开源的弹幕H5播放器增加启动视频广告，能关闭可全屏

Artplayer是一个现代且功能齐全的H5播放器。它不仅全开源且提供了丰富的功能和插件，可以轻松地兼容集成到您的网站或应用程序中。广告收入一直以来都是网站和APP运营者的主要收入来源之一，对于视频站点来说有过之而无不及，所以有一个带视频广告功能的播放器就变得非常重要了，今天我们来看看Artplayer播放器是如何实现视频广告功能的。

1，引入Artplayer播放器、HLS、Artplayer视频广告插件等静态文件

Markup

<script src="https://cdn.bootcdn.net/Ajax/libs/artplayer/5.0.9/artplayer.min.js"></script>
<script src="https://cdn.bootcdn.net/Ajax/libs/HLS.js/1.4.12/hls.min.js"></script>
<script src="artplayer-plugin-ads.js"></script>

2，初始化播放器，并加入视频广告的各项参数

JavaScript

var vid = 'https://www.18ma.cn/static/demo.M3U8';
var art = new Artplayer({
	container: '#player',
	url: vid,
	autoplay: false,
	autoSize: false,
	loop: false,
	mutex: true,
        plugins: [
          artplayerPluginAds({
            // HTML广告，假如是视频广告则忽略该值
            HTML: 'https://www.18ma.cn/static/demo.jpg',

            // 视频广告的地址
            video: 'https://www.18ma.cn/static/demo.M3U8',

            // 广告跳转网址，为空则不跳转
            url: 'https://www.18ma.cn/',

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

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

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

            // 多语言支持
            i18n: {
                close: '关闭广告',
                countdown: '%s秒',
                detail: '查看详情',
                canBeClosed: '%s秒后可关闭广告',
            },
          }),
      ],
});
// ad is clicked
art.on('artplayerPluginAds:click', (ads) => {
    console.info(ads);
});

// Ad skipped
art.on('artplayerPluginAds:skip', (ads) => {
    console.info(ads);
});

Artplayer视频广告插件下载