弹幕同步视频播放速度功能

packages/artplayer-plugin-danmuku/README.md

@@ -38,13 +38,22 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: 'path/to/video.mp4',
     plugins: [artplayerPluginDanmuku({
-        danmuku: [], // Can be an array or return the promised function or danmuku xml url
+        danmuku: [
+            {
+                text: '666', // Danmu text
+                time: 5, // Video time
+                color: '#fff', // Danmu color
+                border: false, // Danmu border
+                mode: 'scroll', // Danmu mode: scroll or static
+            }
+        ], // Can be an array or return the promised function or danmuku xml url
         speed: 5, // Animation time
         opacity: 1, // Opacity
         color: '#fff', // Font color
         size: 25, // Font size
         maxlength: 50, // The maximum number of words in the danmu
         margin: [10, 20], // Margin top and margin bottom
+        synchronousPlayback: false, // Synchronous playback speed
     })],
 });
 
@@ -54,7 +63,8 @@ art.plugins.artplayerPluginDanmuku.emit({
     time: 5, // Video time
     color: '#fff', // Danmu color
     size: 25, // Danmu size
-    border: false // Danmu border
+    border: false, // Danmu border
+    mode: 'scroll', // Danmu mode: scroll or static
 });
 
 // Hide danmu

packages/artplayer-plugin-danmuku/src/danmuku.js

@@ -1,5 +1,5 @@
 import i18n from './i18n';
-import { opacity, size, speed } from './setting';
+import { opacity, size, speed, synchronousPlayback } from './setting';
 import { filter, getRect, getDanmuRef } from './utils';
 import { bilibiliDanmuParseFromUrl } from './bilibili';
 import getDanmuTop from './getDanmuTop';
@@ -10,6 +10,7 @@ export default class Danmuku {
         art.setting.add(opacity);
         art.setting.add(size);
         art.setting.add(speed);
+        art.setting.add(synchronousPlayback);
         this.art = art;
         this.queue = [];
         this.option = {};
@@ -47,6 +48,7 @@ export default class Danmuku {
             margin: [10, 100],
             opacity: 1,
             fontSize: 25,
+            synchronousPlayback: false,
         };
     }
 
@@ -58,6 +60,7 @@ export default class Danmuku {
             margin: 'array',
             opacity: 'number',
             fontSize: 'number',
+            synchronousPlayback: 'boolean',
         };
     }
 
@@ -163,7 +166,10 @@ export default class Danmuku {
                         danmu.$ref.innerText = danmu.text;
                         danmu.$ref.style.color = danmu.color;
                         danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color}` : 'none';
-                        danmu.$restTime = this.option.speed;
+                        danmu.$restTime =
+                            this.option.synchronousPlayback && player.playbackRateState
+                                ? this.option.speed / Number(player.playbackRateState)
+                                : this.option.speed;
                         danmu.$lastStartTime = Date.now();
                         const danmuWidth = getRect(danmu.$ref, 'width');
                         const danmuTop = getDanmuTop(this, danmu);

packages/artplayer-plugin-danmuku/src/i18n.js

@@ -5,6 +5,7 @@ export default {
         'Danmu size': '弹幕大小',
         'Danmu text cannot be empty': '弹幕文本不能为空',
         'The length of the danmu does not exceed': '弹幕文本字数不能超过',
+        'Synchronize video playback speed': '是否同步视频播放速度',
     },
     'zh-tw': {
         'Danmu opacity': '彈幕透明度',
@@ -12,5 +13,6 @@ export default {
         'Danmu size': '弹幕大小',
         'Danmu text cannot be empty': '彈幕文本不能為空',
         'The length of the danmu does not exceed': '彈幕文本字數不能超過',
+        'Synchronize video playback speed': '是否同步視頻播放速度',
     },
 };

packages/artplayer-plugin-danmuku/src/setting.js

@@ -6,7 +6,7 @@ export function opacity(art) {
 
     return {
         name: 'danmuku-opacity',
-        index: 30,
+        index: 10,
         html: `
             <div class="art-setting-header">
                 ${i18n.get('Danmu opacity')}: <span class="art-value">100</span>%
@@ -25,13 +25,13 @@ export function opacity(art) {
                 art.plugins.artplayerPluginDanmuku.config({
                     opacity: Number(value),
                 });
+            });
 
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.opacity) {
-                        $range.value = config.opacity;
-                        $value.innerText = config.opacity * 100;
-                    }
-                });
+            art.on('artplayerPluginDanmuku:config', config => {
+                if ($range.value !== config.opacity) {
+                    $range.value = config.opacity;
+                    $value.innerText = config.opacity * 100;
+                }
             });
         },
     };
@@ -45,7 +45,7 @@ export function size(art) {
 
     return {
         name: 'danmuku-size',
-        index: 50,
+        index: 11,
         html: `
             <div class="art-setting-header">
                 ${i18n.get('Danmu size')}: <span class="art-value">25</span>px
@@ -64,13 +64,13 @@ export function size(art) {
                 art.plugins.artplayerPluginDanmuku.config({
                     fontSize: Number(value),
                 });
+            });
 
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.fontSize) {
-                        $range.value = config.fontSize;
-                        $value.innerText = config.fontSize;
-                    }
-                });
+            art.on('artplayerPluginDanmuku:config', config => {
+                if ($range.value !== config.fontSize) {
+                    $range.value = config.fontSize;
+                    $value.innerText = config.fontSize;
+                }
             });
         },
     };
@@ -84,7 +84,7 @@ export function speed(art) {
 
     return {
         name: 'danmuku-speed',
-        index: 40,
+        index: 12,
         html: `
             <div class="art-setting-header">
                 ${i18n.get('Danmu speed')}: <span class="art-value">5</span>s
@@ -103,13 +103,43 @@ export function speed(art) {
                 art.plugins.artplayerPluginDanmuku.config({
                     speed: Number(value),
                 });
+            });
 
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.speed) {
-                        $range.value = config.speed;
-                        $value.innerText = config.speed;
-                    }
-                });
+            art.on('artplayerPluginDanmuku:config', config => {
+                if ($range.value !== config.speed) {
+                    $range.value = config.speed;
+                    $value.innerText = config.speed;
+                }
+            });
+        },
+    };
+}
+
+export function synchronousPlayback(art) {
+    const {
+        i18n,
+        events: { proxy },
+    } = art;
+    return {
+        name: 'danmuku-synchronousPlayback',
+        index: 13,
+        html: `
+            <label class="art-setting-checkbox">
+                <input type="checkbox"/>${i18n.get('Synchronize video playback speed')}
+            </label>
+        `,
+        mounted: $setting => {
+            const $checkbox = $setting.querySelector('input[type=checkbox]');
+            proxy($checkbox, 'change', () => {
+                art.plugins.artplayerPluginDanmuku.config({
+                    synchronousPlayback: $checkbox.checked,
+                });
+            });
+
+            art.on('artplayerPluginDanmuku:config', config => {
+                if ($checkbox.checked !== config.synchronousPlayback) {
+                    $checkbox.checked = config.synchronousPlayback;
+                }
             });
         },
     };

packages/artplayer/src/style/setting.scss

@@ -67,6 +67,14 @@
                 background-color: #fff;
             }
         }
+
+        .art-setting-checkbox {
+            input {
+                height: 14px;
+                width: 14px;
+                margin-right: 5px;
+            }
+        }
     }
 
     &.artplayer-setting-show {