update ads demo

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

@@ -1,7 +1,22 @@
+import style from 'bundle-text:./style.less';
+
 export default function artplayerPluginAds(option) {
     return (art) => {
+        const {
+            constructor: {
+                utils: { append },
+            },
+            template: { $player },
+        } = art;
+
+        const $ads = append($player, '<div class="artplayer-plugin-ads"></div>');
+        append($ads, option.video ? `<video src="${option.video}" controls="false"></video>` : option.html);
+
         return {
             name: 'artplayerPluginAds',
+            skip() {
+                //
+            },
         };
     };
 }
@@ -10,6 +25,15 @@ artplayerPluginAds.env = process.env.NODE_ENV;
 artplayerPluginAds.version = process.env.APP_VER;
 artplayerPluginAds.build = process.env.BUILD_DATE;
 
+if (typeof document !== 'undefined') {
+    if (!document.getElementById('artplayer-plugin-ads')) {
+        const $style = document.createElement('style');
+        $style.id = 'artplayer-plugin-ads';
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
+}
+
 if (typeof window !== 'undefined') {
     window['artplayerPluginAds'] = artplayerPluginAds;
 }

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

@@ -0,0 +1,16 @@
+.artplayer-plugin-ads {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    z-index: 150;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: #fff;
+    background-color: #000;
+}