update

packages/artplayer-plugin-ads/src/index.js

@@ -3,32 +3,56 @@ import style from 'bundle-text:./style.less';
 export default function artplayerPluginAds(option) {
     return (art) => {
         const {
-            constructor: {
-                utils: { append },
-            },
             template: { $player },
+            constructor: {
+                utils: { append, setStyle },
+            },
         } = art;
 
+        let isEnd = false;
+        let $ads = null;
+        let $timer = null;
+
+        let time = 0;
+        let timer = null;
+
         function skip() {
-            //
+            isEnd = true;
+            art.play();
+            if (option.video) $ads.pause();
+            setStyle(art.template.$ads, 'display', 'none');
+            art.emit('artplayerPluginAds:skip', option);
         }
 
-        function toggleFullscreen() {
-            //
+        function play() {
+            if (isEnd) return;
+            timer = setTimeout(() => {
+                time += 1;
+                $timer.innerHTML = time;
+                if (time >= option.totalDuration) {
+                    skip();
+                } else {
+                    play();
+                }
+            }, 1000);
         }
 
-        function toggleMuted() {
-            //
+        function pause() {
+            if (isEnd) return;
+            clearTimeout(timer);
         }
 
         function show() {
             art.template.$ads = append($player, '<div class="artplayer-plugin-ads"></div>');
 
-            const html = option.video
-                ? `<video class="artplayer-plugin-ads-video" src="${option.video}" controls="false"></video>`
-                : option.html;
+            $ads = append(
+                art.template.$ads,
+                option.video
+                    ? `<video class="artplayer-plugin-ads-video" src="${option.video}"></video>`
+                    : `<div class="artplayer-plugin-ads-html">${option.html}</div>`,
+            );
 
-            const $ads = append(art.template.$ads, html);
+            $timer = append(art.template.$ads, '<div class="artplayer-plugin-ads-timer"></div>');
 
             art.proxy($ads, 'click', () => {
                 if (option.url) window.open(option.url);
@@ -40,15 +64,29 @@ export default function artplayerPluginAds(option) {
 
         art.on('ready', () => {
             art.once('play', () => {
+                show();
                 art.pause();
-                const $ads = show();
-                const isVideo = $ads instanceof HTMLVideoElement;
+                if (option.video) {
+                    art.proxy($ads, 'ended', skip);
+                    art.proxy($ads, 'error', skip);
+                    art.proxy($ads, 'loadedmetadata', () => {
+                        play();
+                        $ads.play();
+                        if ($ads.duration && $ads.duration !== Infinity) {
+                            option.totalDuration = $ads.duration;
+                        }
+                    });
+                } else {
+                    play();
+                }
             });
         });
 
         return {
             name: 'artplayerPluginAds',
             skip,
+            pause,
+            play,
         };
     };
 }

packages/artplayer-plugin-ads/src/style.less

@@ -1,7 +1,4 @@
 .artplayer-plugin-ads {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: absolute;
     z-index: 150;
     left: 0;
@@ -14,8 +11,22 @@
     color: #fff;
     background-color: #000;
 
+    .artplayer-plugin-ads-html {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+    }
+
     .artplayer-plugin-ads-video {
         width: 100%;
         height: 100%;
     }
+
+    .artplayer-plugin-ads-timer {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+    }
 }