Update ads docs

docs/assets/ts/artplayer.d.ts

@@ -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?: {
+    ads?: AdsOption[];
-        /**
-         * The ads video url
-         */
-        url: string;
-    }[];
 
     /**
      * 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;

docs/uncompiled/artplayer.js

@@ -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",

docs/uncompiled/artplayer.js.map

@@ -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

packages/artplayer-document/docs/en/Questions/How to add video ads.md

@@ -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);
+```

packages/artplayer-document/docs/zh-cn/Questions/How to add video ads.md

@@ -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);
+```

packages/artplayer/src/ads.js

@@ -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;

packages/artplayer/types/artplayer.d.ts

@@ -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?: {
+    ads?: AdsOption[];
-        /**
-         * The ads video url
-         */
-        url: string;
-    }[];
 
     /**
      * 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;