add vue

docs/assets/css/style.css

@@ -189,6 +189,7 @@ img {
     height: 70%;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
@@ -199,6 +200,7 @@ img {
     font-size: 20px;
     width: 90%;
     height: 65%;
+    margin-bottom: 10px;
     background-color: rgb(0 0 0 / 20%);
     border: 1px dashed rgba(255, 255, 255, 0.1);
 }

docs/assets/example/danmuku.js

@@ -1,50 +1,27 @@
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku-v2.xml',
-            speed: 5,
-            opacity: 1,
-            fontSize: 20,
-            maxlength: 100,
-            margin: ['10%', 60],
-            antiOverlap: true,
-            useWorker: true,
-            synchronousPlayback: false,
-            filter: (danmu) => danmu.text.length < 50,
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = '隐藏';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = '显示';
-                }
-            },
-        },
-        {
-            position: 'right',
-            html: '发送',
-            click: function () {
-                var text = prompt('请输入弹幕文本', '弹幕测试文本');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
-});
+var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        autoSize: true,
+        fullscreen: true,
+        fullscreenWeb: true,
+        plugins: [
+            artplayerPluginDanmuku({
+                danmuku: '/assets/sample/danmuku-v2.xml',
+                speed: 5,
+                opacity: 1,
+                fontSize: 20,
+                maxlength: 100,
+                margin: ['10%', 60],
+                antiOverlap: true,
+                useWorker: true,
+                synchronousPlayback: false,
+                filter: (danmu) => danmu.text.length < 50,
+            }),
+        ],
+    },
+    function () {
+        const danmuku = document.querySelector('.danmuku');
+        art.plugins.artplayerPluginDanmuku.mount(danmuku);
+    },
+);