mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-15 00:56:16 -08:00
93 lines
2.3 KiB
Plaintext
93 lines
2.3 KiB
Plaintext
---
|
|
title: Ads Plugin
|
|
sidebar_position: 2
|
|
---
|
|
|
|
## Demo
|
|
|
|
👉 [View Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)
|
|
|
|
## Install
|
|
|
|
### Install from `npm`:
|
|
|
|
```bash
|
|
$ npm install artplayer-plugin-ads
|
|
```
|
|
|
|
### Install from `yarn`:
|
|
|
|
```bash
|
|
$ yarn add artplayer-plugin-ads
|
|
```
|
|
|
|
### Install from `script`:
|
|
|
|
```html
|
|
<!-- local -->
|
|
<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>
|
|
```
|
|
|
|
Then you can access the plugin function through `window.artplayerPluginAds`
|
|
|
|
## Use
|
|
|
|
<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 ad, ignore this value if it is a video ad
|
|
html: '<img src="/assets/sample/poster.jpg">',
|
|
|
|
// The address of the video ad
|
|
video: '/assets/sample/test1.mp4',
|
|
|
|
// Ad redirect URL, if empty, no redirect
|
|
url: 'http://artplayer.org',
|
|
|
|
// The length of time that must be watched, the period cannot be skipped, the unit is seconds
|
|
// When the value is greater than or equal to totalDuration, the ad cannot be closed early
|
|
// When the value is equal to or less than 0, the ad can be turned off at any time
|
|
playDuration: 5,
|
|
|
|
// The total duration of the ad, in seconds
|
|
totalDuration: 10,
|
|
|
|
// Whether the video ads defaults to silence
|
|
muted: false,
|
|
|
|
// Multilingual support
|
|
i18n: {
|
|
close: 'Close Ads',
|
|
countdown: '%s seconds',
|
|
detail: 'Check Detail',
|
|
canBeClosed: 'Ads can be closed after %s seconds',
|
|
},
|
|
}),
|
|
],
|
|
});
|
|
|
|
art.on('artplayerPluginAds:click', (ads) => {
|
|
console.info('ad is clicked', ads);
|
|
});
|
|
|
|
art.on('artplayerPluginAds:skip', (ads) => {
|
|
console.info('Ads are skipped', ads);
|
|
});
|
|
```
|