mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-18 19:01:20 -08:00
93 lines
2.2 KiB
Plaintext
93 lines
2.2 KiB
Plaintext
---
|
|
title: 广告插件
|
|
sidebar_position: 2
|
|
---
|
|
|
|
## 演示
|
|
|
|
👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)
|
|
|
|
## 安装
|
|
|
|
### 通过 `npm` 安装：
|
|
|
|
```bash
|
|
$ npm install artplayer-plugin-ads
|
|
```
|
|
|
|
### 通过 `yarn` 安装：
|
|
|
|
```bash
|
|
$ yarn add artplayer-plugin-ads
|
|
```
|
|
|
|
### 通过 `script` 安装：
|
|
|
|
```html
|
|
<!-- 本地 -->
|
|
<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` 访问到插件函数
|
|
|
|
## 使用
|
|
|
|
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-ads/index.js">
|
|
▶ Run Code
|
|
</div>
|
|
|
|
```js
|
|
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);
|
|
});
|
|
```
|