添加字幕插件

packages/artplayer/src/index.js

@@ -71,6 +71,7 @@ class Artplayer extends Emitter {
             quality: [],
             controls: [],
             highlight: [],
+            plugins: [],
             thumbnails: {
                 url: '',
                 number: 60,
@@ -90,18 +91,6 @@ class Artplayer extends Emitter {
         };
     }
 
-    static use(...args) {
-        const plugin = args[0];
-        const installedPlugins = this.plugins || (this.plugins = []);
-        if (installedPlugins.indexOf === -1) {
-            installedPlugins.push(plugin);
-            args.unshift(this);
-            plugin(...args.slice(1));
-            this.prototype.emit('use', plugin);
-        }
-        return this;
-    }
-
     init() {
         this.isFocus = false;
         this.isPlaying = false;
@@ -136,6 +125,20 @@ class Artplayer extends Emitter {
         id += 1;
         this.id = id;
         Artplayer.instances.push(this);
+
+        this.plugins = [];
+        this.option.plugins.forEach((plugin, index) => {
+            const resule = plugin(this);
+            let pluginName = '';
+            if (resule && resule.name) {
+                pluginName = resule.name;
+            } else if (plugin.name) {
+                pluginName = plugin.name;
+            } else {
+                pluginName = `plugin${index}`;
+            }
+            this.plugins[pluginName] = resule;
+        });
     }
 
     destroy(removeHtml = false) {

packages/artplayer/src/scheme/index.js

@@ -32,6 +32,12 @@ export default {
     mutex: 'boolean',
     fullscreen: 'boolean',
     fullscreenWeb: 'boolean',
+    plugins: {
+        type: 'array',
+        child: {
+            type: 'function',
+        },
+    },
     layers: {
         type: 'array',
         child: {

packages/artplayer/src/style/artplayer.scss

@@ -26,8 +26,4 @@
             fill: #fff;
         }
     }
-
-    .art-hide {
-        display: none !important;
-    }
 }

packages/artplayer/src/subtitle.js

@@ -5,7 +5,6 @@ export default class Subtitle {
     constructor(art) {
         this.art = art;
         this.state = true;
-        this.vttText = '';
         const { url } = this.art.option.subtitle;
         if (url) {
             this.init();
@@ -22,10 +21,11 @@ export default class Subtitle {
         const $track = document.createElement('track');
         $track.default = true;
         $track.kind = 'metadata';
-        this.load(subtitle.url).then(data => {
-            $track.src = data;
-            $video.appendChild($track);
-            this.art.refs.$track = $track;
+        $video.appendChild($track);
+        this.art.refs.$track = $track;
+        this.load(subtitle.url).then(vttText => {
+            $track.src = vttToBlob(vttText);
+            this.art.emit('subtitle:load', vttText);
             if ($video.textTracks && $video.textTracks[0]) {
                 const [track] = $video.textTracks;
                 proxy(track, 'cuechange', () => {
@@ -54,12 +54,13 @@ export default class Subtitle {
                 return response.text();
             })
             .then(text => {
+                let vttText = '';
                 if (/x-subrip/gi.test(type)) {
-                    this.vttText = srtToVtt(text);
+                    vttText = srtToVtt(text);
                 } else {
-                    this.vttText = text;
+                    vttText = text;
                 }
-                return vttToBlob(this.vttText);
+                return vttText;
             })
             .catch(err => {
                 notice.show(err);
@@ -103,8 +104,9 @@ export default class Subtitle {
     switch(url) {
         const { $track } = this.art.refs;
         errorHandle($track, 'You need to initialize the subtitle option first.');
-        this.load(url).then(data => {
-            $track.src = data;
+        this.load(url).then(vttText => {
+            $track.src = vttToBlob(vttText);
+            this.art.emit('subtitle:load', vttText);
             this.art.emit('subtitle:switch', url);
         });
     }