mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-19 19:51:20 -08:00
update docs
This commit is contained in:
1 parent
35856b745f
commit
0149a6e557
57 files changed
+344
-134
No files matched your search
@@ -0,0 +1,87 @@
|
||||
---
|
||||
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
|
||||
playDuration: 5,
|
||||
|
||||
// The total duration of the ad, in seconds
|
||||
totalDuration: 10,
|
||||
|
||||
// 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);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
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',
|
||||
|
||||
// 必须观看的时长,期间不能被跳过,单位为秒
|
||||
playDuration: 5,
|
||||
|
||||
// 广告总时长,单位为秒
|
||||
totalDuration: 10,
|
||||
|
||||
// 多语言支持
|
||||
i18n: {
|
||||
close: '关闭广告',
|
||||
countdown: '%s秒',
|
||||
detail: '查看详情',
|
||||
canBeClosed: '%s秒后可关闭广告',
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
art.on('artplayerPluginAds:click', (ads) => {
|
||||
console.info('广告被点击', ads);
|
||||
});
|
||||
|
||||
art.on('artplayerPluginAds:skip', (ads) => {
|
||||
console.info('广告被跳过', ads);
|
||||
});
|
||||
```
|
||||
@@ -25,7 +25,7 @@ $ yarn add artplayer-plugin-danmuku
|
||||
|
||||
```html
|
||||
<!-- 本地 -->
|
||||
<script src="path/to/artplayer-plugin-danmuku/index.js"></script>
|
||||
<script src="path/to/artplayer-plugin-danmuku.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
|
||||
|
||||
Reference in new issue
Block a user