添加白名单功能

packages/artplayer/src/index.js

@@ -24,6 +24,7 @@ import Mask from './mask';
 import Setting from './setting';
 import Storage from './storage';
 import Plugins from './plugins';
+import Mobile from './mobile';
 
 let id = 0;
 class Artplayer extends Emitter {
@@ -111,22 +112,26 @@ class Artplayer extends Emitter {
         
         this.whitelist = new Whitelist(this);
         this.template = new Template(this);
-        this.storage = new Storage(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);
-        this.layers = new Layers(this);
-        this.controls = new Controls(this);
-        this.contextmenu = new Contextmenu(this);
-        this.subtitle = new Subtitle(this);
-        this.info = new Info(this);
-        this.loading = new Loading(this);
-        this.hotkey = new Hotkey(this);
-        this.mask = new Mask(this);
-        this.setting = new Setting(this);
-        this.plugins = new Plugins(this);
+        if (this.whitelist.state) {
+            this.storage = new Storage(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);
+            this.layers = new Layers(this);
+            this.controls = new Controls(this);
+            this.contextmenu = new Contextmenu(this);
+            this.subtitle = new Subtitle(this);
+            this.info = new Info(this);
+            this.loading = new Loading(this);
+            this.hotkey = new Hotkey(this);
+            this.mask = new Mask(this);
+            this.setting = new Setting(this);
+            this.plugins = new Plugins(this);
+        } else {
+            this.mobile = new Mobile(this);
+        }
 
         id += 1;
         this.id = id;
@@ -146,4 +151,4 @@ Object.defineProperty(Artplayer, 'instances', {
 });
 
 window.Artplayer = Artplayer;
-export default Artplayer;
+export default Artplayer;

packages/artplayer/src/mobile.js

@@ -0,0 +1,44 @@
+import { clamp, getExt } from './utils';
+
+export default class Mobile {
+    constructor(art) {
+        const {
+            option,
+            template: { $video },
+        } = art;
+
+        Object.keys(option.moreVideoAttr).forEach(key => {
+            $video[key] = option.moreVideoAttr[key];
+        });
+
+        if (option.muted) {
+            $video.muted = option.muted;
+        }
+
+        if (option.volume) {
+            $video.volume = clamp(option.volume, 0, 1);
+        }
+
+        if (option.poster) {
+            $video.poster = option.poster;
+        }
+
+        if (option.autoplay) {
+            $video.autoplay = option.autoplay;
+        }
+
+        $video.controls = true;
+
+        const typeName = option.type || getExt(option.url);
+        const typeCallback = option.customType[typeName];
+        if (typeName && typeCallback) {
+            art.emit('beforeCustomType', typeName);
+            typeCallback($video, option.url, art);
+            art.emit('afterCustomType', typeName);
+        } else {
+            art.emit('beforeAttachUrl', option.url);
+            $video.src = option.url;
+            art.emit('afterAttachUrl', $video.src);
+        }
+    }
+}

packages/artplayer/src/template.js

@@ -12,10 +12,14 @@ export default class Template {
             errorHandle(false, 'Cannot mount multiple instances on the same dom element');
         }
 
-        this.init();
+        if (art.whitelist.state) {
+            this.initDesktop();
+        } else {
+            this.initMobile();
+        }
     }
 
-    init() {
+    initDesktop() {
         this.$container.innerHTML = `
           <div class="artplayer-video-player">
             <video class="artplayer-video"></video>
@@ -76,6 +80,16 @@ export default class Template {
         this.$contextmenu = this.$container.querySelector('.artplayer-contextmenu');
     }
 
+    initMobile() {
+        this.$container.innerHTML = `
+          <div class="artplayer-video-player">
+            <video class="artplayer-video"></video>
+          </div>
+        `;
+        this.$player = this.$container.querySelector('.artplayer-video-player');
+        this.$video = this.$container.querySelector('.artplayer-video');
+    }
+
     destroy(removeHtml) {
         if (removeHtml) {
             this.$container.innerHTML = '';