finish the ads.js

packages/artplayer/src/ads.js

@@ -4,8 +4,8 @@ export default class Ads {
         const { option } = art;
 
         this.index = 0;
-        this.playing = false;
         this.isEnd = false;
+        this.playing = false;
         this.urlCache = option.url;
 
         if (option.ads.length) {
@@ -18,18 +18,26 @@ export default class Ads {
         return this.art.option.ads[this.index];
     }
 
-    play(item) {
-        const { option, player } = this.art;
+    get prev() {
+        return this.art.option.ads[this.index - 1];
+    }
 
-        player.url = item.url;
-        this.art.emit('ads:start', item);
+    get next() {
+        return this.art.option.ads[this.index + 1];
+    }
+
+    play(item) {
+        this.art.player.switchUrl(item.url);
+
+        this.art.once('video:timeupdate', () => {
+            this.art.emit('ads:start', item);
+        });
 
         this.art.once('video:ended', () => {
-            const nextIndex = this.index + 1;
-            const nextItem = option.ads[nextIndex];
-            if (nextItem) {
-                this.index = nextIndex;
-                this.play(nextItem);
+            const next = this.next;
+            if (next) {
+                this.index += 1;
+                this.play(next);
             } else {
                 this.end();
             }
@@ -40,6 +48,7 @@ export default class Ads {
         this.playing = false;
         this.isEnd = true;
         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/player/attrInit.js

@@ -35,11 +35,7 @@ export default function attrInit(art, player) {
 
     $video.controls = false;
 
-    if (option.ads.length) {
-        art.on('ads:end', () => {
-            player.url = option.url;
-        });
-    } else {
+    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}%`;
             });
         },