bugfix

src/contextmenu.js

@@ -1,5 +1,6 @@
-import { append } from './utils';
+import { append, setStyle } from './utils';
 
+let id = 0;
 export default class Contextmenu {
   constructor(art) {
     this.art = art;
@@ -16,17 +17,19 @@ export default class Contextmenu {
 
     option.contextmenu.push(
       {
-        text: i18n.get('Video info'),
+        name: 'info',
+        html: i18n.get('Video info'),
         click: () => {
           this.art.info.show();
         }
       },
       {
-        text: 'ArtPlayer __VERSION__',
-        link: 'https://github.com/zhw2590582/artplayer'
+        name: 'version',
+        html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>'
       },
       {
-        text: i18n.get('Close'),
+        name: 'close',
+        html: i18n.get('Close'),
         click: () => {
           this.hide();
         }
@@ -59,18 +62,18 @@ export default class Contextmenu {
     refs.$contextmenu = document.createElement('div');
     refs.$contextmenu.classList.add('artplayer-contextmenu');
     option.contextmenu.forEach(item => {
-      const $menu = document.createElement('a');
-      $menu.innerHTML = item.text;
-      $menu.classList.add('art-menu');
-      if (item.link) {
-        $menu.target = '_blank';
-        $menu.href = item.link;
-      } else if (item.click) {
-        $menu.href = '#';
+      id++;
+      const $menu = document.createElement('div');
+      $menu.setAttribute('data-art-menu-id', id);
+      $menu.setAttribute('class', `art-menu art-menu-${item.name || id}`);
+      append($menu, item.html);
+      setStyle($menu, item.style || {});
+      if (item.click) {
         proxy($menu, 'click', event => {
           event.preventDefault();
           item.click(this.art, event);
           this.hide();
+          this.art.emit('contextmenu:click', $menu);
         });
       }
       append(refs.$contextmenu, $menu);

src/controls/danmu.js

@@ -1,6 +1,9 @@
 export default class Danmu {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
   }
+
+  apply(art) {
+    this.art = art;
+  }
 }

src/controls/fullscreen.js

@@ -1,6 +1,9 @@
 export default class Fullscreen {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
   }
+
+  apply(art) {
+    this.art = art;
+  }
 }

src/controls/index.js

@@ -1,5 +1,4 @@
 import { secondToTime, clamp } from '../utils';
-import validControl from '../verification/control';
 import Danmu from './danmu';
 import Fullscreen from './fullscreen';
 import Pip from './pip';
@@ -25,100 +24,84 @@ export default class Controls {
   }
 
   init() {
-    this.add({
-      control: Progress,
+    this.add(new Progress({
       disable: false,
       position: 'top',
       index: 10
-    });
+    }));
 
-    this.add({
-      control: Thumbnails,
+    this.add(new Thumbnails({
       disable: !this.art.option.thumbnails.url,
       position: 'top',
       index: 20
-    });
+    }));
 
-    this.add({
-      control: PlayAndPause,
+    this.add(new PlayAndPause({
       disable: false,
       position: 'left',
       index: 10
-    });
+    }));
 
-    this.add({
-      control: Volume,
+    this.add(new Volume({
       disable: false,
-      tooltip: 'Volume',
       position: 'left',
       index: 20
-    });
+    }));
 
-    this.add({
-      control: Time,
+    this.add(new Time({
       disable: false,
-      tooltip: 'Volume',
       position: 'left',
       index: 30
-    });
+    }));
 
-    this.add({
-      control: Danmu,
+    this.add(new Danmu({
       disable: false,
-      tooltip: 'Danmu',
       position: 'right',
       index: 10
-    });
+    }));
 
-    this.add({
-      control: Subtitle,
+    this.add(new Subtitle({
       disable: false,
-      tooltip: 'Subtitle',
       position: 'right',
       index: 20
-    });
+    }));
 
-    this.add({
-      control: Setting,
+    this.add(new Setting({
       disable: false,
-      tooltip: 'Setting',
       position: 'right',
       index: 30
-    });
+    }));
 
-    this.add({
-      control: Pip,
+    this.add(new Pip({
       disable: false,
-      tooltip: 'Pip',
       position: 'right',
       index: 40
-    });
+    }));
 
-    this.add({
-      control: Fullscreen,
+    this.add(new Fullscreen({
       disable: false,
-      tooltip: 'Fullscreen',
       position: 'right',
       index: 50
-    });
+    }));
 
-    this.art.option.controls.forEach(item => {
+    this.art.option.controls.filter(item => !item.disable).forEach(item => {
       this.add(item);
     });
   }
 
-  add(option) {
-    validControl(option);
+  add(control) {
+    const { option } = control;
     if (!option.disable) {
       id++;
-      const name = option.control.name.toLowerCase() || `control${id}`;
+      const name = control.constructor.name.toLowerCase() || `control${id}`;
       const $control = document.createElement('div');
       $control.setAttribute('class', `art-control art-control-${name}`);
       $control.setAttribute('data-control-index', String(option.index) || id);
-      option.ref = $control;
-      this.commonMethod(option);
-      this[name] = new option.control(this.art, option);
+      option.$control = $control;
+      this.commonMethod(control);
       this.$map[option.position].push($control);
+      control.apply(this.art);
+      this[name] = control;
     }
   }
 
@@ -148,23 +131,22 @@ export default class Controls {
     });
   }
 
-  commonMethod(option) {
-    Object.defineProperty(option.control.prototype, 'hide', {
+  commonMethod(control) {
+    Object.defineProperty(control, 'hide', {
       value: () => {
-        option.ref.style.display = 'none';
-        this.art.emit('control:hide', option.ref);
+        control.option.$control.style.display = 'none';
+        this.art.emit('control:hide', control.option.$control);
       }
     });
 
-    Object.defineProperty(option.control.prototype, 'show', {
+    Object.defineProperty(control, 'show', {
       value: () => {
-        option.ref.style.display =
-          option.position === 'top' ? 'block' : 'inline-block';
-        this.art.emit('control:show', option.ref);
+        control.option.$control.style.display = 'block';
+        this.art.emit('control:show', control.option.$control);
       }
     });
 
-    Object.defineProperty(option.control.prototype, 'getPosFromEvent', {
+    Object.defineProperty(control, 'getPosFromEvent', {
       value: event => {
         const { $video, $progress } = this.art.refs;
         const { left } = $progress.getBoundingClientRect();

src/controls/pip.js

@@ -1,6 +1,9 @@
 export default class Pip {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
   }
+
+  apply(art) {
+    this.art = art;
+  }
 }

src/controls/playAndPause.js

@@ -2,17 +2,20 @@ import { append } from '../utils';
 import icons from '../icons';
 
 export default class PlayAndPause {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.init();
   }
 
   init() {
     const { events: { proxy }, player } = this.art;
 
-    this.$play = append(this.option.ref, icons.play);
-    this.$pause = append(this.option.ref, icons.pause);
+    this.$play = append(this.option.$control, icons.play);
+    this.$pause = append(this.option.$control, icons.pause);
     this.$pause.style.display = 'none';
 
     proxy(this.$play, 'click', () => {

src/controls/progress.js

@@ -1,9 +1,12 @@
 import { append } from '../utils';
 
 export default class Progress {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.isDroging = false;
     this.getLoaded = this.getLoaded.bind(this);
     this.getPlayed = this.getPlayed.bind(this);
@@ -20,7 +23,7 @@ export default class Progress {
     } = this.art;
 
     append(
-      this.option.ref,
+      this.option.$control,
       `
         <div class="art-control-progress-inner">
           <div class="art-progress-loaded"></div>
@@ -32,15 +35,15 @@ export default class Progress {
       `
     );
 
-    this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
-    this.$played = this.option.ref.querySelector('.art-progress-played');
-    this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
-    this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
-    this.$tip = this.option.ref.querySelector('.art-progress-tip');
+    this.$loaded = this.option.$control.querySelector('.art-progress-loaded');
+    this.$played = this.option.$control.querySelector('.art-progress-played');
+    this.$highlight = this.option.$control.querySelector('.art-progress-highlight');
+    this.$indicator = this.option.$control.querySelector('.art-progress-indicator');
+    this.$tip = this.option.$control.querySelector('.art-progress-tip');
 
     this.art.on('video:canplay', () => {
       this.set('loaded', this.getLoaded());
-      highlight.forEach(item => {
+      highlight.filter(item => !item.disable).forEach(item => {
         const left = Number(item.time) / $video.duration;
         append(this.$highlight, `
           <span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>
@@ -61,7 +64,7 @@ export default class Progress {
       this.set('played', 1);
     });
 
-    proxy(this.option.ref, 'mousemove', event => {
+    proxy(this.option.$control, 'mousemove', event => {
       this.$tip.style.display = 'block';
       if (event.path.indexOf(this.$highlight) > -1) {
         this.showHighlight(event);
@@ -70,11 +73,11 @@ export default class Progress {
       }
     });
 
-    proxy(this.option.ref, 'mouseout', () => {
+    proxy(this.option.$control, 'mouseout', () => {
       this.$tip.style.display = 'none';
     });
 
-    proxy(this.option.ref, 'click', event => {
+    proxy(this.option.$control, 'click', event => {
       if (event.target !== this.$indicator) {
         const { second, percentage } = this.getPosFromEvent(event);
         this.set('played', percentage);
@@ -108,7 +111,7 @@ export default class Progress {
     const { text, time } = event.target.dataset;
     this.$tip.innerHTML = text;
     const left =
-      Number(time) / $video.duration * this.option.ref.clientWidth +
+      Number(time) / $video.duration * this.option.$control.clientWidth +
       event.target.clientWidth / 2 -
       this.$tip.clientWidth / 2;
     this.$tip.style.left = `${left}px`;
@@ -120,8 +123,8 @@ export default class Progress {
     this.$tip.innerHTML = time;
     if (width <= tipWidth / 2) {
       this.$tip.style.left = 0;
-    } else if (width > this.option.ref.clientWidth - tipWidth / 2) {
-      this.$tip.style.left = `${this.option.ref.clientWidth - tipWidth}px`;
+    } else if (width > this.option.$control.clientWidth - tipWidth / 2) {
+      this.$tip.style.left = `${this.option.$control.clientWidth - tipWidth}px`;
     } else {
       this.$tip.style.left = `${width - tipWidth / 2}px`;
     }

src/controls/setting.js

@@ -1,6 +1,9 @@
 export default class Setting {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
   }
+
+  apply(art) {
+    this.art = art;
+  }
 }

src/controls/subtitle.js

@@ -1,6 +1,9 @@
 export default class Subtitle {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
   }
+
+  apply(art) {
+    this.art = art;
+  }
 }

src/controls/thumbnails.js

@@ -1,7 +1,10 @@
 export default class Thumbnails {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.init();
   }
 
@@ -12,12 +15,12 @@ export default class Thumbnails {
     } = this.art;
 
     proxy($progress, 'mousemove', event => {
-      this.option.ref.style.display = 'block';
+      this.option.$control.style.display = 'block';
       this.showThumbnails(event);
     });
 
     proxy($progress, 'mouseout', () => {
-      this.option.ref.style.display = 'none';
+      this.option.$control.style.display = 'none';
     });
   }
 
@@ -30,17 +33,17 @@ export default class Thumbnails {
     let yIndex = Math.ceil(perIndex / column);
     let xIndex = perIndex % column || column;
 
-    this.option.ref.style.backgroundImage = `url(${url})`;
-    this.option.ref.style.height = `${height}px`;
-    this.option.ref.style.width = `${width}px`;
-    this.option.ref.style.backgroundPosition = `-${--xIndex * width}px -${--yIndex * height}px`;
+    this.option.$control.style.backgroundImage = `url(${url})`;
+    this.option.$control.style.height = `${height}px`;
+    this.option.$control.style.width = `${width}px`;
+    this.option.$control.style.backgroundPosition = `-${--xIndex * width}px -${--yIndex * height}px`;
 
     if (posWidth <= width / 2) {
-      this.option.ref.style.left = 0;
+      this.option.$control.style.left = 0;
     } else if (posWidth > $progress.clientWidth - width / 2) {
-      this.option.ref.style.left = `${$progress.clientWidth - width}px`;
+      this.option.$control.style.left = `${$progress.clientWidth - width}px`;
     } else {
-      this.option.ref.style.left = `${posWidth - width / 2}px`;
+      this.option.$control.style.left = `${posWidth - width / 2}px`;
     }
   }
 }

src/controls/time.js

@@ -1,25 +1,28 @@
 import { secondToTime } from '../utils';
 
 export default class Time {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.init();
   }
 
   init() {
-    this.option.ref.innerHTML = '00:00 / 00:00';
+    this.option.$control.innerHTML = '00:00 / 00:00';
 
     this.art.on('video:canplay', () => {
-      this.option.ref.innerHTML = this.getTime();
+      this.option.$control.innerHTML = this.getTime();
     });
 
     this.art.on('video:timeupdate', () => {
-      this.option.ref.innerHTML = this.getTime();
+      this.option.$control.innerHTML = this.getTime();
     });
 
     this.art.on('video:seeking', () => {
-      this.option.ref.innerHTML = this.getTime();
+      this.option.$control.innerHTML = this.getTime();
     });
   }
 

src/controls/volume.js

@@ -2,18 +2,21 @@ import { append, setStorage, getStorage, clamp } from '../utils';
 import icons from '../icons';
 
 export default class Volume {
-  constructor(art, option) {
-    this.art = art;
+  constructor(option) {
     this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
     this.isDroging = false;
     this.init();
   }
 
   init() {
     const { events: { proxy }, player } = this.art;
-    this.$volume = append(this.option.ref, icons.volume);
-    this.$volumeClose = append(this.option.ref, icons.volumeClose);
-    this.$volumePanel = append(this.option.ref, '<div class="art-volume-panel"></div>');
+    this.$volume = append(this.option.$control, icons.volume);
+    this.$volumeClose = append(this.option.$control, icons.volumeClose);
+    this.$volumePanel = append(this.option.$control, '<div class="art-volume-panel"></div>');
     this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
     this.$volumeClose.style.display = 'none';
 
@@ -31,9 +34,10 @@ export default class Volume {
     proxy(this.$volumeClose, 'click', () => {
       this.$volume.style.display = 'block';
       this.$volumeClose.style.display = 'none';
+      player.volume(getStorage('volume'));
     });
 
-    proxy(this.option.ref, 'mouseenter', () => {
+    proxy(this.option.$control, 'mouseenter', () => {
       this.$volumePanel.classList.add('art-volume-panel-hover');
 
       // TODO
@@ -42,7 +46,7 @@ export default class Volume {
       }, 200);
     });
 
-    proxy(this.option.ref, 'mouseleave', () => {
+    proxy(this.option.$control, 'mouseleave', () => {
       this.$volumePanel.classList.remove('art-volume-panel-hover');
     });
 

src/index.js

@@ -1,4 +1,4 @@
-import './style/index.scss';
+import './style';
 import { deepMerge } from './utils';
 import validOption from './verification/player';
 import config from './config';
@@ -26,7 +26,7 @@ class Artplayer extends Emitter {
     super();
     this.emit('init:start');
     this.option = deepMerge({}, Artplayer.DEFAULTS, option);
-    validOption(this.option);
+    validOption(Artplayer.DEFAULTS, this.option);
     this.init();
     this.emit('init:end');
   }
@@ -44,6 +44,7 @@ class Artplayer extends Emitter {
       container: '.artplayer',
       url: '',
       poster: '',
+      volume: 0.7,
       thumbnails: {
         url: '',
         number: 60,
@@ -51,10 +52,8 @@ class Artplayer extends Emitter {
         height: 90,
         column: 10
       },
-      volume: 0.7,
       autoplay: false,
       loop: false,
-      preload: 'auto',
       type: '',
       mimeCodec: '',
       layers: [],
@@ -68,6 +67,12 @@ class Artplayer extends Emitter {
       },
       controls: [],
       highlight: [],
+      moreVideoAttr: {
+        'controls': false,
+        'preload': 'auto',
+        'webkit-playsinline': true,
+        'playsinline': true
+      },
       lang: navigator.language.toLowerCase()
     };
   }

src/info.js

@@ -45,14 +45,14 @@ export default class Info {
     infoHtml.push(`
       <div class="art-info-item">
         <div class="art-info-title">Video type:</div>
-        <div class="art-info-content" data-head="Content-Type"></div>
+        <div class="art-info-content" data-head="Content-Type">loading...</div>
       </div>
     `);
 
     infoHtml.push(`
       <div class="art-info-item">
         <div class="art-info-title">Video size:</div>
-        <div class="art-info-content" data-head="Content-length"></div>
+        <div class="art-info-content" data-head="Content-length">loading...</div>
       </div>
     `);
 

src/player.js

@@ -9,13 +9,14 @@ export default class Player {
   }
 
   init() {
-    const { option } = this.art;
-    const { $video } = this.art.refs;
-    $video.controls = false;
-    $video.poster = option.poster;
+    const { option, refs: { $video } } = this.art;
+    Object.keys(option.moreVideoAttr).forEach(key => {
+      const value = option.moreVideoAttr[key];
+      $video[key] = value;
+    });
     $video.volume = clamp(option.volume, 0, 1);
+    $video.poster = option.poster;
     $video.autoplay = option.autoplay;
-    $video.preload = option.preload;
     $video.src = option.url;
   }
 

src/style/artplayer.scss

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+
+.artplayer-video-player {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    outline: 0;
+    font-family: Roboto,Arial,Helvetica,sans-serif;
+    color: #eee;
+    text-align: left;
+    direction: ltr;
+    font-size: 14px;
+    line-height: 1.3;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    touch-action: manipulation;
+    -ms-high-contrast-adjust: none;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    .art-icon {
+        display: inline-block;
+        svg {
+            fill: #fff;
+        }
+    }
+
+    &.artplayer-error {
+        .art-progress-indicator, .art-progress-tip {
+            display: none !important;
+        }
+    }
+}

src/style/bottom.scss

@@ -1,111 +1,4 @@
-@charset "UTF-8";
-
 .artplayer-video-player {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    outline: 0;
-    font-family: Roboto,Arial,Helvetica,sans-serif;
-    color: #eee;
-    text-align: left;
-    direction: ltr;
-    font-size: 14px;
-    line-height: 1.3;
-    user-select: none;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    touch-action: manipulation;
-    -ms-high-contrast-adjust: none;
-
-    * {
-        box-sizing: border-box;
-    }
-
-    .art-icon {
-        display: inline-block;
-        svg {
-            fill: #fff;
-        }
-    }
-
-    .artplayer-video {
-        position: absolute;
-        z-index: 10;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        background-color: #000;
-        outline: 0;
-    }
-
-    .artplayer-subtitle {
-        position: absolute;
-        z-index: 20;
-        bottom: 40px;
-        width: 100%;
-        padding: 0 20px;
-        text-align: center;
-        color: #fff;
-        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
-        font-size: 20px;
-
-        p {
-            margin: 5px 0;
-        }
-    }
-
-    .artplayer-layers {
-        position: absolute;
-        z-index: 30;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-
-        .art-layer {
-            position: absolute;
-        }
-    }
-
-    .artplayer-mask {
-        display: none;
-        position: absolute;
-        z-index: 40;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-    
-        .art-icon-playBig {
-            position: absolute;
-            right: 30px;
-            bottom: 65px;
-            opacity: .6;
-        }
-    }
-
-    .artplayer-loading {
-        display: none;
-        position: absolute;
-        z-index: 40;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-    }
-
     .artplayer-bottom {
         position: absolute;
         z-index: 50;
@@ -226,7 +119,7 @@
                 background-color: rgba(0,0,0,.7);
             }
         }
-
+    
         .artplayer-controls {
             position: relative;
             pointer-events: all;
@@ -234,7 +127,7 @@
             align-items: center;
             justify-content: space-between;
             height: 36px;
-
+    
             .art-control {
                 float: left;
                 font-size: 12px;
@@ -251,7 +144,7 @@
                     padding: 7px;
                 }
             }
-
+    
             .art-control-volume {
                 .art-volume-panel {
                     position: relative;
@@ -260,7 +153,7 @@
                     height: 100%;
                     transition: margin .2s cubic-bezier(0.4,0.0,1,1),width .2s cubic-bezier(0.4,0.0,1,1);
                     overflow: hidden;
-
+    
                     .art-volume-slider-handle {
                         position: absolute;
                         top: 50%;
@@ -270,17 +163,17 @@
                         border-radius: 12px;
                         margin-top: -6px;
                         background: #fff;
-
+    
                         &::before {
                             left: -54px;
                             background: #fff;
                         }
-
+    
                         &::after {
                             left: 6px;
                             background: rgba(255,255,255,.2);
                         }
-
+    
                         &::before, &::after {
                             content: '';
                             position: absolute;
@@ -291,13 +184,13 @@
                             width: 60px
                         }
                     }
-
+    
                     &.art-volume-panel-hover {
                         width: 60px;
                     }
                 }
             }
-
+    
             .art-control-time {
                 padding: 0 10px;
             }
@@ -310,87 +203,4 @@
             visibility: visible;
         }
     }
-
-    .artplayer-notice {
-        display: none;
-        font-size: 14px;
-        position: absolute;
-        z-index: 60;
-        left: 10px;
-        top: 10px;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 10px;
-        border-radius: 3px;
-        color: #fff;
-        background: rgba(0, 0, 0, 0.6);
-    }
-
-    .artplayer-contextmenu {
-        position: absolute;
-        z-index: 70;
-        left: 0;
-        top: 0;
-        width: 200px;
-        padding: 5px 0;
-        background:rgba(0, 0, 0, 0.8);
-        a {
-            font-size: 13px;
-            display: block;
-            color: #fff;
-            padding: 7px 10px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            text-decoration: none;
-            text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-    
-            &:hover {
-                background-color: rgba(255,255,255,.1);
-            }
-        }
-    }
-
-    .artplayer-info {
-        display: none;
-        position: absolute;
-        left: 10px;
-        top: 10px;
-        z-index: 80;
-        width: 350px;
-        min-height: 150px;
-        padding: 10px;
-        color: #fff;
-        font-size: 12px;
-        font-family: Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;
-        -webkit-font-smoothing: antialiased;
-        background: rgba(0,0,0,.7);
-
-        .art-info-item {
-            display: flex;
-            margin-bottom: 5px;
-            .art-info-title {
-                width: 100px;
-                text-align: right;
-            }
-    
-            .art-info-content {
-                flex: 1;
-                padding-left: 5px;
-            }
-        }
-
-        .artplayer-info-close {
-            position: absolute;
-            top: 5px;
-            right: 5px;
-            cursor: pointer;
-        }
-    }
-
-    &.artplayer-error {
-        .art-progress-indicator, .art-progress-tip {
-            display: none !important;
-        }
-    }
-}
+}

src/style/contextmenu.scss

@@ -0,0 +1,32 @@
+.artplayer-video-player {
+    .artplayer-contextmenu {
+        position: absolute;
+        z-index: 70;
+        left: 0;
+        top: 0;
+        width: 200px;
+        padding: 5px 0;
+        background:rgba(0, 0, 0, 0.8);
+        .art-menu {
+            cursor: pointer;
+            font-size: 13px;
+            display: block;
+            color: #fff;
+            padding: 7px 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+
+            a {
+                color: #fff;
+                text-decoration: none;
+            }
+    
+            &:hover {
+                background-color: rgba(255,255,255,.1);
+            }
+        }
+    }
+    
+}

src/style/index.js

@@ -0,0 +1,10 @@
+import './artplayer.scss';
+import './video.scss';
+import './subtitle.scss';
+import './layers.scss';
+import './mask.scss';
+import './loading.scss';
+import './bottom.scss';
+import './notice.scss';
+import './contextmenu.scss';
+import './info.scss';

src/style/info.scss

@@ -0,0 +1,38 @@
+.artplayer-video-player {
+    .artplayer-info {
+        display: none;
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        z-index: 80;
+        width: 350px;
+        min-height: 150px;
+        padding: 10px;
+        color: #fff;
+        font-size: 12px;
+        font-family: Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background: rgba(0,0,0,.7);
+    
+        .art-info-item {
+            display: flex;
+            margin-bottom: 5px;
+            .art-info-title {
+                width: 100px;
+                text-align: right;
+            }
+    
+            .art-info-content {
+                flex: 1;
+                padding-left: 5px;
+            }
+        }
+    
+        .artplayer-info-close {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            cursor: pointer;
+        }
+    }
+}

src/style/layers.scss

@@ -0,0 +1,16 @@
+.artplayer-video-player {
+    .artplayer-layers {
+        position: absolute;
+        z-index: 30;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+    
+        .art-layer {
+            position: absolute;
+        }
+    }
+}

src/style/loading.scss

@@ -0,0 +1,15 @@
+.artplayer-video-player {
+    .artplayer-loading {
+        display: none;
+        position: absolute;
+        z-index: 40;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+    }
+}

src/style/mask.scss

@@ -0,0 +1,21 @@
+.artplayer-video-player {
+    .artplayer-mask {
+        display: none;
+        position: absolute;
+        z-index: 40;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+    
+        .art-icon-playBig {
+            position: absolute;
+            right: 30px;
+            bottom: 65px;
+            opacity: .6;
+        }
+    }
+}

src/style/notice.scss

@@ -0,0 +1,16 @@
+.artplayer-video-player {
+    .artplayer-notice {
+        display: none;
+        font-size: 14px;
+        position: absolute;
+        z-index: 60;
+        left: 10px;
+        top: 10px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 10px;
+        border-radius: 3px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0.6);
+    }
+}

src/style/subtitle.scss

@@ -0,0 +1,17 @@
+.artplayer-video-player {
+    .artplayer-subtitle {
+        position: absolute;
+        z-index: 20;
+        bottom: 40px;
+        width: 100%;
+        padding: 0 20px;
+        text-align: center;
+        color: #fff;
+        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
+        font-size: 20px;
+    
+        p {
+            margin: 5px 0;
+        }
+    }
+}

src/style/video.scss

@@ -0,0 +1,14 @@
+.artplayer-video-player {
+    .artplayer-video {
+        position: absolute;
+        z-index: 10;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+        outline: 0;
+    }
+}

src/subtitle.js

@@ -3,8 +3,12 @@ import { errorHandle, getExt, setStyle } from './utils';
 export default class Subtitle {
   constructor(art) {
     this.art = art;
-    this.checkExt(this.art.option.subtitle.url);
-    this.init();
+
+    const { url } = this.art.option.subtitle;
+    if (url) {
+      this.checkExt(url);
+      this.init();
+    }
   }
 
   init() {

src/template.js

@@ -8,7 +8,7 @@ export default class Template {
     const { refs } = this.art;
     refs.$container.innerHTML = `
         <div class="artplayer-video-player">
-          <video class="artplayer-video" webkit-playsinline playsinline></video>
+          <video class="artplayer-video"></video>
           <div class="artplayer-subtitle"></div>
           <div class="artplayer-layers"></div>
           <div class="artplayer-mask"></div>

src/utils/index.js

@@ -91,3 +91,9 @@ export function setStorage(key, value) {
   });
   localStorage.setItem('artplayer_settings', JSON.stringify(storage));
 }
+
+export function getType(val) {
+  const { toString } = Object.prototype;
+  const type = toString.call(val).slice(8, -1).toLowerCase().replace(/\s/g, '');
+  return type;
+}

src/verification/control.js

@@ -1,11 +1,6 @@
 import { errorHandle } from '../utils';
 
 export default function validControl(option) {
-  errorHandle(
-    typeof option.control === 'function',
-    `'control' option require 'function' type, but got '${typeof option.control}'.`
-  );
-
   errorHandle(
     typeof option.disable === 'boolean',
     `'disable' option require 'boolean' type, but got '${typeof option.disable}'.`

src/verification/player.js

@@ -1,108 +1,15 @@
-import { errorHandle } from '../utils';
+import { errorHandle, getType } from '../utils';
 
-export default function validOption(option) {
-  errorHandle(
-    option.container,
-    '\'container\' option is required.'
-  );
+export default function validOption(DEFAULTS, option, path = ['option']) {
+  Object.keys(DEFAULTS).forEach(key => {
+    const defaultValue = DEFAULTS[key];
+    const value = option[key];
+    const defaultType = getType(defaultValue);
+    const type = getType(value);
+    errorHandle(defaultType === type, `'${path.join('.')}.${key}' require '${defaultType}' type, but got '${type}'`);
 
-  errorHandle(
-    option.url,
-    '\'url\' option is required.'
-  );
-
-  errorHandle(
-    typeof option.container === 'string' || option.container instanceof Element,
-    `'container' option require 'string' or 'Element' type, but got '${typeof option.container}'.`
-  );
-
-  errorHandle(
-    typeof option.url === 'string',
-    `'url' option require 'string' type, but got '${typeof option.url}'.`
-  );
-
-  errorHandle(
-    typeof option.poster === 'string',
-    `'poster' option require 'string' type, but got '${typeof option.poster}'.`
-  );
-
-  errorHandle(
-    Object.prototype.toString.call(option.thumbnails) === '[object Object]',
-    `'thumbnails' option require 'object' type, but got '${typeof option.thumbnails}'.`
-  );
-
-  errorHandle(
-    typeof option.volume === 'number',
-    `'volume' option require 'number' type, but got '${typeof option.volume}'.`
-  );
-
-  errorHandle(
-    typeof option.autoplay === 'boolean',
-    `'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}.`
-  );
-
-  errorHandle(
-    typeof option.lang === 'string',
-    `'lang' option require 'string' type, but got '${typeof option.lang}'.`
-  );
-
-  errorHandle(
-    typeof option.type === 'string',
-    `'type' option require 'string' type, but got '${typeof option.type}'.`
-  );
-
-  errorHandle(
-    typeof option.mimeCodec === 'string',
-    `'mimeCodec' option require 'string' type, but got '${typeof option.mimeCodec}'.`
-  );
-
-  errorHandle(
-    Array.isArray(option.layers),
-    `'layers' option require 'array' type, but got '${typeof option.layers}'.`
-  );
-
-  errorHandle(
-    Array.isArray(option.contextmenu),
-    `'contextmenu' option require 'array' type, but got '${typeof option.contextmenu}'.`
-  );
-
-  errorHandle(
-    typeof option.loading === 'string' || option.loading instanceof Element,
-    `'loading' option require 'string' type, but got '${typeof option.loading}'.`
-  );
-
-  errorHandle(
-    typeof option.theme === 'string',
-    `'theme' option require 'string' type, but got '${typeof option.theme}'.`
-  );
-
-  errorHandle(
-    typeof option.hotkey === 'boolean',
-    `'hotkey' option require 'boolean' type, but got '${typeof option.hotkey}'.`
-  );
-
-  errorHandle(
-    Object.prototype.toString.call(option.subtitle) === '[object Object]',
-    `'subtitle' option require 'object' type, but got '${typeof option.subtitle}'.`
-  );
-
-  errorHandle(
-    Array.isArray(option.controls),
-    `'controls' option require 'array' type, but got '${typeof option.controls}'.`
-  );
-
-  errorHandle(
-    Array.isArray(option.highlight),
-    `'highlight' option require 'array' type, but got '${typeof option.highlight}'.`
-  );
+    if (type === 'object') {
+      validOption(defaultValue, value, path.concat(key));
+    }
+  });
 }