添加字幕本地预览

packages/artplayer/src/plugins/index.js

@@ -1,6 +1,7 @@
 import { errorHandle, hasOwnProperty } from '../utils';
 import subtitleOffset from './subtitleOffset';
-import localPreview from './localPreview';
+import localVideo from './localVideo';
+import localSubtitle from './localSubtitle';
 import miniProgressBar from './miniProgressBar';
 import networkMonitor from './networkMonitor';
 import autoPip from './autoPip';
@@ -20,8 +21,12 @@ export default class Plugins {
             this.add(miniProgressBar);
         }
 
-        if (option.localPreview) {
-            this.add(localPreview);
+        if (option.localVideo) {
+            this.add(localVideo);
+        }
+
+        if (option.localSubtitle) {
+            this.add(localSubtitle);
         }
 
         if (option.networkMonitor) {

packages/artplayer/src/plugins/localSubtitle.js

@@ -0,0 +1,76 @@
+import { append, setStyle, setStyles, errorHandle, getExt, vttToBlob, srtToVtt, assToVtt } from '../utils';
+
+export default function localSubtitle(art) {
+    const {
+        events: { proxy },
+        notice,
+        i18n,
+        subtitle,
+    } = art;
+
+    const notSupport = 'Only supports subtitle files in .ass, .vtt and .srt format';
+    i18n.update({
+        'zh-cn': {
+            [notSupport]: '只支持 .ass、.vtt 和 .srt 格式的字幕文件',
+        },
+        'zh-tw': {
+            [notSupport]: '只支持 .ass、.vtt 和 .srt 格式的字幕文件',
+        },
+    });
+
+    function loadSubtitle(file) {
+        if (file) {
+            const type = getExt(file.name);
+            if (['ass', 'vtt', 'srt'].includes(type)) {
+                const reader = new FileReader();
+                proxy(reader, 'load', event => {
+                    const text = event.target.result;
+                    switch (type) {
+                        case 'srt': {
+                            const url = vttToBlob(srtToVtt(text));
+                            subtitle.switch(url, file.name);
+                            break;
+                        }
+                        case 'ass': {
+                            const url = vttToBlob(assToVtt(text));
+                            subtitle.switch(url, file.name);
+                            break;
+                        }
+                        case 'vtt': {
+                            const url = vttToBlob(text);
+                            subtitle.switch(url, file.name);
+                            break;
+                        }
+                        default:
+                            break;
+                    }
+                });
+                reader.readAsText(file);
+            } else {
+                const tip = i18n.get(notSupport);
+                notice.show(tip, true, 3000);
+                errorHandle(false, tip);
+            }
+        }
+    }
+
+    return {
+        name: 'localSubtitle',
+        attach(target) {
+            const $input = append(target, '<input type="file">');
+            setStyle(target, 'position', 'relative');
+            setStyles($input, {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                left: '0',
+                top: '0',
+                opacity: '0',
+            });
+            proxy($input, 'change', () => {
+                const file = $input.files[0];
+                loadSubtitle(file);
+            });
+        },
+    };
+}

packages/artplayer/src/plugins/localVideo.js

@@ -1,41 +1,33 @@
-export default function localPreview(art) {
-    const { append, setStyle, setStyles, sleep, errorHandle } = art.constructor.utils;
+import { append, setStyle, setStyles, errorHandle, getExt } from '../utils';
+
+export default function localVideo(art) {
     const {
         events: { proxy },
-        option,
         notice,
         i18n,
         template,
         player,
     } = art;
 
+    const notSupport = 'Playback of this file format is not supported';
     i18n.update({
         'zh-cn': {
-            'Playback of this file format is not supported': '不支持播放该文件格式',
-            'Load local video successfully': '加载本地视频成功',
+            [notSupport]: '不支持播放该文件格式',
         },
         'zh-tw': {
-            'Playback of this file format is not supported': '不支持播放該文件格式',
-            'Load local video successfully': '加載本地視頻成功',
+            [notSupport]: '不支持播放該文件格式',
         },
     });
 
     function loadVideo(file) {
         if (file) {
+            const type = getExt(file.name);
             const canPlayType = template.$video.canPlayType(file.type);
             if (canPlayType === 'maybe' || canPlayType === 'probably') {
                 const url = URL.createObjectURL(file);
-                player.playbackRate = false;
-                player.aspectRatio = false;
-                template.$video.src = url;
-                sleep(1000).then(() => {
-                    player.currentTime = 0;
-                });
-                option.url = url;
-                art.emit('switch', url);
-                notice.show(i18n.get('Load local video successfully'));
+                player.switchUrl(url, file.name);
             } else {
-                const tip = `${i18n.get('Playback of this file format is not supported')}: ${file.type}`;
+                const tip = `${i18n.get(notSupport)}: ${file.type || type}`;
                 notice.show(tip, true, 3000);
                 errorHandle(false, tip);
             }
@@ -44,7 +36,6 @@ export default function localPreview(art) {
 
     proxy(template.$player, 'dragover', e => {
         e.preventDefault();
-        notice.show(i18n.get('Load local video successfully'));
     });
 
     proxy(template.$player, 'drop', e => {
@@ -54,7 +45,7 @@ export default function localPreview(art) {
     });
 
     return {
-        name: 'localPreview',
+        name: 'localVideo',
         attach(target) {
             const $input = append(target, '<input type="file">');
             setStyle(target, 'position', 'relative');