add usePlugins

src/index.js

@@ -18,6 +18,7 @@ import Layers from './layers';
 import Loading from './loading';
 import Notice from './notice';
 import Mask from './mask';
+import plugins from './plugins';
 
 let id = 0;
 export const instances = [];
@@ -29,6 +30,7 @@ class Artplayer extends Emitter {
     this.option = Object.assign({}, Artplayer.DEFAULTS, option);
     validOption(this.option);
     this.init();
+    this.usePlugins();
     this.emit('init:end');
   }
 
@@ -53,6 +55,7 @@ class Artplayer extends Emitter {
       },
       volume: 0.7,
       autoplay: false,
+      loop: false,
       preload: 'auto',
       type: '',
       mimeCodec: '',
@@ -71,24 +74,19 @@ class Artplayer extends Emitter {
     };
   }
 
-  static use(plugin) {
-    const installedPlugins = this.plugins || (this.plugins = []);
-    if (installedPlugins.indexOf(plugin) > -1) {
-      return this;
+  static use(Plugin) {
+    const name = Plugin.name.toLowerCase();
+    const installedPlugins = this.plugins || (this.plugins = {});
+    if (!installedPlugins[name]) {
+      const args = Array.from(arguments).slice(1);
+      args.unshift(this);
+      installedPlugins[name] = new Plugin(...args);
     }
-
-    const args = Array.from(arguments).slice(1);
-    args.unshift(this);
-    if (typeof plugin.install === 'function') {
-      plugin.install.apply(plugin, args);
-    } else if (typeof plugin === 'function') {
-      plugin.apply(null, args);
-    }
-    installedPlugins.push(plugin);
     return this;
   }
 
   init() {
+    this.isError = false;
     this.isFocus = false;
     this.isPlaying = false;
     this.refs = {};
@@ -101,6 +99,7 @@ class Artplayer extends Emitter {
 
     this.template = new Template(this);
     this.i18n = new I18n(this);
+    this.notice = new Notice(this);
     this.events = new Events(this);
     this.player = new Player(this);
     // this.mse = new Mse(this);
@@ -111,7 +110,6 @@ class Artplayer extends Emitter {
     this.subtitle = new Subtitle(this);
     this.info = new Info(this);
     this.loading = new Loading(this);
-    this.notice = new Notice(this);
     this.hotkey = new Hotkey(this);
     this.mask = new Mask(this);
 
@@ -120,10 +118,18 @@ class Artplayer extends Emitter {
     return this;
   }
 
-  destroy() {
+  usePlugins() {
+    Object.keys(plugins).forEach(name => {
+      Artplayer.use(plugins[name]);
+    });
+  }
+
+  destroy(removeHtml = false) {
     this.events.destroy();
-    this.refs.$container.innerHTML = '';
     instances.splice(instances.indexOf(this), 1);
+    if (removeHtml) {
+      this.refs.$container.innerHTML = '';
+    }
     this.emit('destroy');
   }
 }

src/player.js

@@ -20,7 +20,7 @@ export default class Player {
   }
 
   eventBind() {
-    const { events: { proxy }, refs: { $video } } = this.art;
+    const { events: { proxy }, refs: { $player, $video }, i18n, notice } = this.art;
 
     config.video.events.forEach(eventName => {
       proxy($video, eventName, event => {
@@ -74,11 +74,20 @@ export default class Player {
       this.art.isPlaying = false;
       this.art.controls.show();
       this.art.mask.show();
+      if (this.art.option.loop) {
+        this.seek(0);
+        this.play();
+      }
     });
 
     this.art.on('video:error', () => {
+      this.art.isError = true;
       this.art.isPlaying = false;
       this.art.loading.hide();
+      this.art.controls.hide();
+      $player.classList.add('artplayer-error');
+      notice.show(i18n.get('Video load failed'), false);
+      this.art.destroy();
     });
   }
 

src/plugins/index.js

@@ -0,0 +1,9 @@
+import Srt from './srt';
+import Mse from './mse';
+
+const plugins = {
+  Srt,
+  Mse
+};
+
+export default plugins;

src/plugins/mse.js

@@ -0,0 +1,6 @@
+export default class Mse {
+  constructor(art) {
+    this.art = art;
+    console.log(this);
+  }
+}

src/plugins/srt.js

@@ -0,0 +1,6 @@
+export default class Srt {
+  constructor(art) {
+    this.art = art;
+    console.log(this);
+  }
+}

src/style/index.scss

@@ -13,7 +13,6 @@
     font-size: 14px;
     line-height: 1.3;
     user-select: none;
-    -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     touch-action: manipulation;
     -ms-high-contrast-adjust: none;
@@ -51,7 +50,6 @@
         color: #fff;
         text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
         font-size: 20px;
-        box-sizing: border-box;
     }
 
     .artplayer-layers {
@@ -115,7 +113,6 @@
         opacity: 0;
         visibility: hidden;
         transition: all .2s ease-in-out;
-        box-sizing: border-box;
         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
     
         .artplayer-progress {
@@ -271,4 +268,10 @@
             }
         }
     }
+
+    &.artplayer-error {
+        .art-progress-indicator, .art-progress-tip {
+            display: none !important;
+        }
+    }
 }

src/verification/player.js

@@ -41,6 +41,11 @@ export default function validOption(option) {
     `'autoplay' option require 'boolean' type, but got '${typeof option.autoplay}'.`
   );
 
+  errorHandle(
+    typeof option.loop === 'boolean',
+    `'loop' option require 'boolean' type, but got '${typeof option.loop}'.`
+  );
+
   errorHandle(
     ['none', 'metadata', 'auto'].indexOf(option.preload) > -1,
     `'preload' option require one of 'none、metadata、auto', but got '${option.preload}.`