Merge pull request #209 from zhw2590582/ads-option

Ads option

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
@@ -305,6 +312,11 @@ type Option = {
      */
     whitelist?: (string | WhitelistFunction | RegExp)[];
 
+    /**
+     * Custom ads list
+     */
+    ads?: AdsOption[];
+
     /**
      * Custom layer list
      */
@@ -644,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

@@ -751,6 +751,9 @@
     localVideo: b,
     localSubtitle: b,
     useSSR: b,
+    ads: [{
+      url: s
+    }],
     plugins: [f],
     whitelist: ["".concat(s, "|").concat(f, "|").concat(r)],
     layers: [ComponentOption],
@@ -1142,7 +1145,10 @@
     }
 
     $video.controls = false;
-    player.url = option.url;
+
+    if (option.ads.length === 0) {
+      player.url = option.url;
+    }
   }
 
   function eventInit(art, player) {
@@ -1292,6 +1298,22 @@
     });
   }
 
+  function timeupdateInit(art, player) {
+    var timer = null;
+
+    (function timeupdate() {
+      art.emit('timeupdate', player.currentTime || 0);
+
+      if (!art.isDestroy) {
+        timer = window.requestAnimationFrame(timeupdate);
+      }
+    })();
+
+    art.on('destroy', function () {
+      window.cancelAnimationFrame(timer);
+    });
+  }
+
   function playMix(art, player) {
     var i18n = art.i18n,
         notice = art.notice,
@@ -1437,7 +1459,6 @@
       return new Promise(function (resolve) {
         if (url === player.url) return resolve(url);
         URL.revokeObjectURL(player.url);
-        var playing = player.playing;
         player.url = url;
         art.once('video:canplay', function () {
           player.playbackRate = false;
@@ -1447,7 +1468,7 @@
           player.currentTime = currentTime;
           art.notice.show = '';
 
-          if (playing) {
+          if (player.playing) {
             player.play();
           }
 
@@ -2234,7 +2255,7 @@
         }
       }
     });
-    art.on('video:timeupdate', function () {
+    art.on('timeupdate', function () {
       if (interval.length) {
         if (player.currentTime < interval[0] || player.currentTime > interval[1]) {
           player.seek = interval[0];
@@ -2343,6 +2364,7 @@
     eventInit(art, this);
     attrInit(art, this);
     exclusiveInit(art, this);
+    timeupdateInit(art, this);
     playMix(art, this);
     pauseMix(art, this);
     toggleMix(art, this);
@@ -2782,7 +2804,7 @@
           art.on('video:progress', function () {
             setBar('loaded', player.loaded);
           });
-          art.on('video:timeupdate', function () {
+          art.on('timeupdate', function () {
             setBar('played', player.played);
           });
           art.on('video:ended', function () {
@@ -4647,7 +4669,7 @@
         art.on('destroy', function () {
           $progressBar.style.display = 'none';
         });
-        art.on('video:timeupdate', function () {
+        art.on('timeupdate', function () {
           $progressBar.style.width = "".concat(player.played * 100, "%");
         });
       }
@@ -4706,6 +4728,76 @@
     return Plugins;
   }();
 
+  var Ads = /*#__PURE__*/function () {
+    function Ads(art) {
+      _classCallCheck(this, Ads);
+
+      this.art = art;
+      var option = art.option;
+      this.index = 0;
+      this.isEnd = false;
+      this.playing = false;
+      this.urlCache = option.url;
+
+      if (this.current) {
+        this.playing = true;
+        this.play(this.current);
+      }
+    }
+
+    _createClass(Ads, [{
+      key: "current",
+      get: function get() {
+        return this.art.option.ads[this.index];
+      }
+    }, {
+      key: "prev",
+      get: function get() {
+        return this.art.option.ads[this.index - 1];
+      }
+    }, {
+      key: "next",
+      get: function get() {
+        return this.art.option.ads[this.index + 1];
+      }
+    }, {
+      key: "play",
+      value: function play() {
+        var _this = this;
+
+        var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        if (this.isEnd) return;
+        this.art.player.switchUrl(item.url);
+        this.art.once('video:timeupdate', function () {
+          _this.art.emit('ads:start', item);
+        });
+        this.art.once('video:ended', function () {
+          var next = _this.next;
+
+          if (next) {
+            _this.index += 1;
+
+            _this.play(next);
+          } else {
+            _this.end();
+          }
+        });
+      }
+    }, {
+      key: "end",
+      value: function end() {
+        if (this.isEnd) return;
+        this.isEnd = true;
+        this.playing = false;
+        this.art.option.url = this.urlCache;
+        this.art.player.switchUrl(this.urlCache);
+        this.art.emit('ads:end');
+      }
+    }]);
+
+    return Ads;
+  }();
+
   var Mobile = function Mobile(art) {
     _classCallCheck(this, Mobile);
 
@@ -4786,6 +4878,7 @@
         _this.controls = new Control(_assertThisInitialized(_this));
         _this.contextmenu = new Contextmenu(_assertThisInitialized(_this));
         _this.subtitle = new Subtitle(_assertThisInitialized(_this));
+        _this.ads = new Ads(_assertThisInitialized(_this));
         _this.info = new Info(_assertThisInitialized(_this));
         _this.loading = new Loading(_assertThisInitialized(_this));
         _this.hotkey = new Hotkey(_assertThisInitialized(_this));
@@ -4838,7 +4931,7 @@
     }, {
       key: "build",
       get: function get() {
-        return '1640230966636';
+        return '1640248815968';
       }
     }, {
       key: "config",
@@ -4909,6 +5002,7 @@
           localVideo: false,
           localSubtitle: false,
           useSSR: false,
+          ads: [],
           layers: [],
           contextmenu: [],
           controls: [],

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/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/screenshot.js","../../packages/artplayer/src/control/quality.jLine 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artplayer",
-  "version": "4.0.9",
+  "version": "4.1.0",
   "expose": "Artplayer",
   "description": "ArtPlayer.js is a modern and full featured HTML5 video player",
   "main": "dist/artplayer.js",

packages/artplayer/src/ads.js

@@ -0,0 +1,56 @@
+export default class Ads {
+    constructor(art) {
+        this.art = art;
+        const { option } = art;
+
+        this.index = 0;
+        this.isEnd = false;
+        this.playing = false;
+        this.urlCache = option.url;
+
+        if (this.current) {
+            this.playing = true;
+            this.play(this.current);
+        }
+    }
+
+    get current() {
+        return this.art.option.ads[this.index];
+    }
+
+    get prev() {
+        return this.art.option.ads[this.index - 1];
+    }
+
+    get next() {
+        return this.art.option.ads[this.index + 1];
+    }
+
+    play(item = {}) {
+        if (this.isEnd) return;
+        this.art.player.switchUrl(item.url);
+
+        this.art.once('video:timeupdate', () => {
+            this.art.emit('ads:start', item);
+        });
+
+        this.art.once('video:ended', () => {
+            const next = this.next;
+            if (next) {
+                this.index += 1;
+                this.play(next);
+            } else {
+                this.end();
+            }
+        });
+    }
+
+    end() {
+        if (this.isEnd) return;
+        this.isEnd = true;
+        this.playing = false;
+        this.art.option.url = this.urlCache;
+        this.art.player.switchUrl(this.urlCache);
+        this.art.emit('ads:end');
+    }
+}

packages/artplayer/src/control/progress.js

@@ -111,7 +111,7 @@ export default function progress(option) {
                     setBar('loaded', player.loaded);
                 });
 
-                art.on('video:timeupdate', () => {
+                art.on('timeupdate', () => {
                     setBar('played', player.played);
                 });
 

packages/artplayer/src/index.js

@@ -22,6 +22,7 @@ import Icons from './icons';
 import Setting from './setting';
 import Storage from './storage';
 import Plugins from './plugins';
+import Ads from './ads';
 import Mobile from './mobile';
 
 let id = 0;
@@ -52,6 +53,7 @@ export default class Artplayer extends Emitter {
             this.controls = new Control(this);
             this.contextmenu = new Contextmenu(this);
             this.subtitle = new Subtitle(this);
+            this.ads = new Ads(this);
             this.info = new Info(this);
             this.loading = new Loading(this);
             this.hotkey = new Hotkey(this);
@@ -141,6 +143,7 @@ export default class Artplayer extends Emitter {
             localVideo: false,
             localSubtitle: false,
             useSSR: false,
+            ads: [],
             layers: [],
             contextmenu: [],
             controls: [],

packages/artplayer/src/player/attrInit.js

@@ -34,5 +34,8 @@ export default function attrInit(art, player) {
     }
 
     $video.controls = false;
-    player.url = option.url;
+
+    if (option.ads.length === 0) {
+        player.url = option.url;
+    }
 }

packages/artplayer/src/player/index.js

@@ -2,6 +2,7 @@ import urlMix from './urlMix';
 import attrInit from './attrInit';
 import eventInit from './eventInit';
 import exclusiveInit from './exclusiveInit';
+import timeupdateInit from './timeupdateInit';
 import playMix from './playMix';
 import pauseMix from './pauseMix';
 import toggleMix from './toggleMix';
@@ -34,6 +35,7 @@ export default class Player {
         eventInit(art, this);
         attrInit(art, this);
         exclusiveInit(art, this);
+        timeupdateInit(art, this);
         playMix(art, this);
         pauseMix(art, this);
         toggleMix(art, this);

packages/artplayer/src/player/loopMin.js

@@ -22,7 +22,7 @@ export default function loopMin(art, player) {
         },
     });
 
-    art.on('video:timeupdate', () => {
+    art.on('timeupdate', () => {
         if (interval.length) {
             if (player.currentTime < interval[0] || player.currentTime > interval[1]) {
                 player.seek = interval[0];

packages/artplayer/src/player/switchMix.js

@@ -7,7 +7,6 @@ export default function switchMix(art, player) {
         return new Promise((resolve) => {
             if (url === player.url) return resolve(url);
             URL.revokeObjectURL(player.url);
-            const { playing } = player;
             player.url = url;
             art.once('video:canplay', () => {
                 player.playbackRate = false;
@@ -16,7 +15,7 @@ export default function switchMix(art, player) {
                 player.autoSize = option.autoSize;
                 player.currentTime = currentTime;
                 art.notice.show = '';
-                if (playing) {
+                if (player.playing) {
                     player.play();
                 }
                 if (name) {

packages/artplayer/src/player/timeupdateInit.js

@@ -0,0 +1,14 @@
+export default function timeupdateInit(art, player) {
+    let timer = null;
+
+    (function timeupdate() {
+        art.emit('timeupdate', player.currentTime || 0);
+        if (!art.isDestroy) {
+            timer = window.requestAnimationFrame(timeupdate);
+        }
+    })();
+
+    art.on('destroy', () => {
+        window.cancelAnimationFrame(timer);
+    });
+}

packages/artplayer/src/plugins/miniProgressBar.js

@@ -25,7 +25,7 @@ export default function miniProgressBar(art) {
                 $progressBar.style.display = 'none';
             });
 
-            art.on('video:timeupdate', () => {
+            art.on('timeupdate', () => {
                 $progressBar.style.width = `${player.played * 100}%`;
             });
         },

packages/artplayer/src/scheme/index.js

@@ -57,6 +57,11 @@ export default {
     localVideo: b,
     localSubtitle: b,
     useSSR: b,
+    ads: [
+        {
+            url: s,
+        },
+    ],
     plugins: [f],
     whitelist: [`${s}|${f}|${r}`],
     layers: [ComponentOption],

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
@@ -305,6 +312,11 @@ type Option = {
      */
     whitelist?: (string | WhitelistFunction | RegExp)[];
 
+    /**
+     * Custom ads list
+     */
+    ads?: AdsOption[];
+
     /**
      * Custom layer list
      */
@@ -644,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;