mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-15 09:06:16 -08:00
Update ads docs
This commit is contained in:
Harvey committed
1 parent
b584550917
commit
75baca8462
7 files changed
+198
-14
No files matched your search
Vendored
+18
-6
@@ -139,6 +139,13 @@ type SubtitleOption = {
|
||||
bilingual?: boolean;
|
||||
};
|
||||
|
||||
type AdsOption = {
|
||||
/**
|
||||
* The ads video url
|
||||
*/
|
||||
url: string;
|
||||
};
|
||||
|
||||
type Option = {
|
||||
/**
|
||||
* The container mounted by the player
|
||||
@@ -308,12 +315,7 @@ type Option = {
|
||||
/**
|
||||
* Custom ads list
|
||||
*/
|
||||
ads?: {
|
||||
/**
|
||||
* The ads video url
|
||||
*/
|
||||
url: string;
|
||||
}[];
|
||||
ads?: AdsOption[];
|
||||
|
||||
/**
|
||||
* Custom layer list
|
||||
@@ -654,6 +656,16 @@ declare class Artplayer extends Player {
|
||||
switch(url: string, option?: SubtitleOption): Promise<string>;
|
||||
};
|
||||
|
||||
readonly ads: {
|
||||
index: number;
|
||||
isEnd: boolean;
|
||||
playing: boolean;
|
||||
current: AdsOption;
|
||||
prev: AdsOption;
|
||||
next: AdsOption;
|
||||
end(): void;
|
||||
};
|
||||
|
||||
readonly mobile: object;
|
||||
|
||||
readonly player: Player;
|
||||
|
||||
@@ -4765,6 +4765,7 @@
|
||||
value: function play(item) {
|
||||
var _this = this;
|
||||
|
||||
if (this.isEnd || !item.url) return;
|
||||
this.art.player.switchUrl(item.url);
|
||||
this.art.once('video:timeupdate', function () {
|
||||
_this.art.emit('ads:start', item);
|
||||
@@ -4784,6 +4785,7 @@
|
||||
}, {
|
||||
key: "end",
|
||||
value: function end() {
|
||||
if (this.isEnd) return;
|
||||
this.isEnd = true;
|
||||
this.playing = false;
|
||||
this.art.option.url = this.urlCache;
|
||||
@@ -4928,7 +4930,7 @@
|
||||
}, {
|
||||
key: "build",
|
||||
get: function get() {
|
||||
return '1640235663330';
|
||||
return '1640248815968';
|
||||
}
|
||||
}, {
|
||||
key: "config",
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/timeupdateInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenLine truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/timeupdateInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenLine truncated
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
title: How to add video ads
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
Video ads play before main video playback, support multiple video ads
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
muted: true,
|
||||
autoSize: true,
|
||||
autoplay: true,
|
||||
ads: [
|
||||
{
|
||||
url: '/assets/sample/test1.mp4'
|
||||
},
|
||||
{
|
||||
url: '/assets/sample/test2.webm'
|
||||
},
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Skip The Ads',
|
||||
click: function () {
|
||||
// Skip The Ads
|
||||
art.ads.end();
|
||||
},
|
||||
},
|
||||
],
|
||||
layers: [
|
||||
{
|
||||
html: 'Skip The Ads',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
},
|
||||
click: function () {
|
||||
// Skip The Ads
|
||||
art.ads.end();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// Triggers when each video advertisement is played
|
||||
art.on('ads:start', (item) => {
|
||||
console.info('Ads is playing: ' + item.url);
|
||||
});
|
||||
|
||||
// Triggers when all video advertisements are end
|
||||
art.on('ads:end', () => {
|
||||
console.info('Ads is end');
|
||||
});
|
||||
|
||||
// Current advertising index
|
||||
console.info(art.ads.index);
|
||||
|
||||
// Whether all the advertisements are ended
|
||||
console.info(art.ads.isEnd);
|
||||
|
||||
// Whether the advertisement is playing
|
||||
console.info(art.ads.playing);
|
||||
|
||||
// The object of the prev advertisement
|
||||
console.info(art.ads.prev);
|
||||
|
||||
// The object of the current advertisement
|
||||
console.info(art.ads.current);
|
||||
|
||||
// The object of the next advertisement
|
||||
console.info(art.ads.next);
|
||||
```
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
title: 如何添加视频广告
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
视频广告存在于正式视频播放之前，支持多个视频广告
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
muted: true,
|
||||
autoSize: true,
|
||||
autoplay: true,
|
||||
ads: [
|
||||
{
|
||||
url: '/assets/sample/test1.mp4'
|
||||
},
|
||||
{
|
||||
url: '/assets/sample/test2.webm'
|
||||
},
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '跳过广告',
|
||||
click: function () {
|
||||
// 跳过广告
|
||||
art.ads.end();
|
||||
},
|
||||
},
|
||||
],
|
||||
layers: [
|
||||
{
|
||||
html: '跳过广告',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
},
|
||||
click: function () {
|
||||
// 跳过广告
|
||||
art.ads.end();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 当每个视频广告播放时触发
|
||||
art.on('ads:start', (item) => {
|
||||
console.info('Ads is playing: ' + item.url);
|
||||
});
|
||||
|
||||
// 当全部视频广告播放完成
|
||||
art.on('ads:end', () => {
|
||||
console.info('Ads is end');
|
||||
});
|
||||
|
||||
// 当前广告的下标
|
||||
console.info(art.ads.index);
|
||||
|
||||
// 广告是否已经结束
|
||||
console.info(art.ads.isEnd);
|
||||
|
||||
// 广告是否正在播放
|
||||
console.info(art.ads.playing);
|
||||
|
||||
// 上一个广告的对象
|
||||
console.info(art.ads.prev);
|
||||
|
||||
// 当前广告的对象
|
||||
console.info(art.ads.current);
|
||||
|
||||
// 下一个广告的对象
|
||||
console.info(art.ads.next);
|
||||
```
|
||||
@@ -27,6 +27,7 @@ export default class Ads {
|
||||
}
|
||||
|
||||
play(item) {
|
||||
if (this.isEnd || !item.url) return;
|
||||
this.art.player.switchUrl(item.url);
|
||||
|
||||
this.art.once('video:timeupdate', () => {
|
||||
@@ -45,6 +46,7 @@ export default class Ads {
|
||||
}
|
||||
|
||||
end() {
|
||||
if (this.isEnd) return;
|
||||
this.isEnd = true;
|
||||
this.playing = false;
|
||||
this.art.option.url = this.urlCache;
|
||||
|
||||
+18
-6
@@ -139,6 +139,13 @@ type SubtitleOption = {
|
||||
bilingual?: boolean;
|
||||
};
|
||||
|
||||
type AdsOption = {
|
||||
/**
|
||||
* The ads video url
|
||||
*/
|
||||
url: string;
|
||||
};
|
||||
|
||||
type Option = {
|
||||
/**
|
||||
* The container mounted by the player
|
||||
@@ -308,12 +315,7 @@ type Option = {
|
||||
/**
|
||||
* Custom ads list
|
||||
*/
|
||||
ads?: {
|
||||
/**
|
||||
* The ads video url
|
||||
*/
|
||||
url: string;
|
||||
}[];
|
||||
ads?: AdsOption[];
|
||||
|
||||
/**
|
||||
* Custom layer list
|
||||
@@ -654,6 +656,16 @@ declare class Artplayer extends Player {
|
||||
switch(url: string, option?: SubtitleOption): Promise<string>;
|
||||
};
|
||||
|
||||
readonly ads: {
|
||||
index: number;
|
||||
isEnd: boolean;
|
||||
playing: boolean;
|
||||
current: AdsOption;
|
||||
prev: AdsOption;
|
||||
next: AdsOption;
|
||||
end(): void;
|
||||
};
|
||||
|
||||
readonly mobile: object;
|
||||
|
||||
readonly player: Player;
|
||||
|
||||
Reference in new issue
Block a user