update

src/contextmenu.js

@@ -79,7 +79,7 @@ export default class Contextmenu {
       }
       append(refs.$contextmenu, $menu);
     });
-    append(refs.$wrap, refs.$contextmenu);
+    append(refs.$container, refs.$contextmenu);
   }
 
   setPos(event) {

src/controls/index.js

@@ -31,7 +31,7 @@ export default class Controls {
       disable: false,
       html: 'Progress',
       position: 'top',
-      index: 0
+      index: 10
     });
 
     this.add({
@@ -39,7 +39,7 @@ export default class Controls {
       disable: false,
       html: 'Highlight',
       position: 'top',
-      index: 10
+      index: 20
     });
 
     this.add({
@@ -47,7 +47,7 @@ export default class Controls {
       disable: false,
       html: 'Screenshot',
       position: 'top',
-      index: 20
+      index: 30
     });
 
     this.add({
@@ -56,7 +56,7 @@ export default class Controls {
       html: 'PlayAndPause',
       tooltip: 'PlayAndPause',
       position: 'left',
-      index: 0
+      index: 10
     });
 
     this.add({
@@ -65,7 +65,7 @@ export default class Controls {
       html: 'Volume',
       tooltip: 'Volume',
       position: 'left',
-      index: 10
+      index: 20
     });
 
     this.add({
@@ -74,7 +74,7 @@ export default class Controls {
       html: 'Time',
       tooltip: 'Volume',
       position: 'left',
-      index: 20
+      index: 30
     });
 
     this.add({
@@ -83,7 +83,7 @@ export default class Controls {
       html: 'Danmu',
       tooltip: 'Danmu',
       position: 'right',
-      index: 0
+      index: 10
     });
 
     this.add({
@@ -92,7 +92,7 @@ export default class Controls {
       html: 'Subtitle',
       tooltip: 'Subtitle',
       position: 'right',
-      index: 10
+      index: 20
     });
 
     this.add({
@@ -101,7 +101,7 @@ export default class Controls {
       html: 'Setting',
       tooltip: 'Setting',
       position: 'right',
-      index: 20
+      index: 30
     });
 
     this.add({
@@ -110,7 +110,7 @@ export default class Controls {
       html: 'Pip',
       tooltip: 'Pip',
       position: 'right',
-      index: 30
+      index: 40
     });
 
     this.add({
@@ -119,7 +119,7 @@ export default class Controls {
       html: 'Fullscreen',
       tooltip: 'Fullscreen',
       position: 'right',
-      index: 40
+      index: 50
     });
 
     this.art.option.controls.forEach(item => {
@@ -147,26 +147,26 @@ export default class Controls {
   mount() {
     const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
     Object.keys(this.$map).forEach(key => {
-      const $list = this.$map[key].sort(
-        (a, b) =>
-          Number(a.dataset.controlIndex) - Number(b.dataset.controlIndex)
-      );
-
-      $list.forEach($control => {
-        switch (key) {
-          case 'top':
-            $progress.appendChild($control);
-            break;
-          case 'left':
-            $controlsLeft.appendChild($control);
-            break;
-          case 'right':
-            $controlsRight.appendChild($control);
-            break;
-          default:
-            break;
-        }
-      });
+      this.$map[key]
+        .sort(
+          (a, b) =>
+            Number(a.dataset.controlIndex) - Number(b.dataset.controlIndex)
+        )
+        .forEach($control => {
+          switch (key) {
+            case 'top':
+              $progress.appendChild($control);
+              break;
+            case 'left':
+              $controlsLeft.appendChild($control);
+              break;
+            case 'right':
+              $controlsRight.appendChild($control);
+              break;
+            default:
+              break;
+          }
+        });
     });
   }
 
@@ -180,25 +180,26 @@ export default class Controls {
 
     Object.defineProperty(option.control.prototype, 'show', {
       value: () => {
-        option.ref.style.display = option.position === 'top' ? 'block' : 'inline-block';
+        option.ref.style.display =
+          option.position === 'top' ? 'block' : 'inline-block';
         this.art.emit('control:show', option.ref);
       }
     });
 
     Object.defineProperty(option.control.prototype, 'addMenu', {
-      value: (menus) => {
+      value: menus => {
         console.log(menus);
       }
     });
   }
 
   show() {
-    const { $wrap } = this.art.refs;
-    $wrap.classList.add('controls-show');
+    const { $container } = this.art.refs;
+    $container.classList.add('controls-show');
   }
 
   hide() {
-    const { $wrap } = this.art.refs;
-    $wrap.classList.remove('controls-show');
+    const { $container } = this.art.refs;
+    $container.classList.remove('controls-show');
   }
 }

src/index.js

@@ -91,6 +91,7 @@ class Artplayer extends Emitter {
     } else {
       this.refs.$container = document.querySelector(this.option.container);
     }
+    this.refs.$container.classList.add('artplayer-container');
 
     this.template = new Template(this);
     this.i18n = new I18n(this);
@@ -115,6 +116,7 @@ class Artplayer extends Emitter {
 
   destroy() {
     this.events.destroy();
+    this.refs.$container.classList.remove('artplayer-container');
     this.refs.$container.innerHTML = '';
     instances.splice(instances.indexOf(this), 1);
     this.emit('destroy');

src/mse.js

@@ -1,4 +1,5 @@
-import { errorHandle, request, getExt } from './utils';
+import ArtPlayerError from './utils/ArtPlayerError';
+import { errorHandle, getExt } from './utils';
 import config from './config';
 
 export default class Mse {
@@ -93,7 +94,7 @@ export default class Mse {
   fetchUrl() {
     const { option: { url }, notice, i18n, loading } = this.art;
     this.art.emit('player:fetch:start', url);
-    request(url)
+    this.request(url)
       .then(response => {
         this.sourceBuffer.appendBuffer(response);
         this.art.emit('player:fetch:success', url);
@@ -109,4 +110,12 @@ export default class Mse {
         }
       });
   }
+
+  request(url) {
+    return fetch(url)
+      .then(response => response.arrayBuffer())
+      .catch(err => {
+        throw new ArtPlayerError(err.message);
+      });
+  }
 }

src/style/index.scss

@@ -1,9 +1,7 @@
 @charset "UTF-8";
 
-.artplayer-wrap {
+.artplayer-container {
     position: relative;
-    width: 100%;
-    height: 100%;
     text-align: left;
     overflow: hidden;
     font-family: Roboto,Arial,Helvetica,sans-serif;
@@ -18,7 +16,7 @@
 
     .artplayer-video {
         position: absolute;
-        z-index: 1;
+        z-index: 10;
         left: 0;
         top: 0;
         right: 0;
@@ -29,7 +27,7 @@
 
     .artplayer-subtitle {
         position: absolute;
-        z-index: 2;
+        z-index: 20;
         bottom: 40px;
         width: 100%;
         padding: 0 20px;
@@ -42,7 +40,7 @@
 
     .artplayer-layers {
         position: absolute;
-        z-index: 3;
+        z-index: 30;
         left: 0;
         top: 0;
         right: 0;
@@ -54,7 +52,7 @@
     .artplayer-mask {
         display: none;
         position: absolute;
-        z-index: 4;
+        z-index: 40;
         left: 0;
         top: 0;
         right: 0;
@@ -64,7 +62,7 @@
         align-items: center;
         justify-content: center;
         cursor: pointer;
-
+    
         .art-icon-play {
             opacity: .8;
             display: flex;
@@ -76,9 +74,57 @@
         }
     }
 
+    .artplayer-bottom {
+        position: absolute;
+        z-index: 40;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100px;
+        opacity: 0;
+        visibility: hidden;
+        transition: all .2s ease-in-out;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
+    }
+    
+    &.controls-show, &:hover {
+        .artplayer-bottom {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+
+    .artplayer-loading {
+        display: none;
+        position: absolute;
+        z-index: 50;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .artplayer-notice {
+        display: none;
+        font-size: 13px;
+        position: absolute;
+        z-index: 60;
+        left: 10px;
+        top: 10px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 10px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0.6);
+    }
+
     .artplayer-contextmenu {
         position: absolute;
-        z-index: 7;
+        z-index: 70;
         left: 0;
         top: 0;
         width: 200px;
@@ -94,58 +140,10 @@
             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-controls {
-        position: absolute;
-        z-index: 4;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 100px;
-        opacity: 0;
-        visibility: hidden;
-        transition: all .2s ease-in-out;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
-    }
-
-    &.controls-show, &:hover {
-        .artplayer-controls {
-            opacity: 1;
-            visibility: visible;
-        }
-    }
-
-    .artplayer-loading {
-        display: none;
-        position: absolute;
-        z-index: 5;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .artplayer-notice {
-        display: none;
-        font-size: 13px;
-        position: absolute;
-        z-index: 6;
-        left: 10px;
-        top: 10px;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 10px;
-        color: #fff;
-        background: rgba(0, 0, 0, 0.6);
-    }
 }

src/template.js

@@ -7,23 +7,20 @@ export default class Template {
   init() {
     const { refs } = this.art;
     refs.$container.innerHTML = `
-        <div class="artplayer-wrap">
-          <video class="artplayer-video" webkit-playsinline playsinline></video>
-          <div class="artplayer-subtitle"></div>
-          <div class="artplayer-layers"></div>
-          <div class="artplayer-mask"></div>
-          <div class="artplayer-bottom">
-            <div class="artplayer-progress"></div>
-            <div class="artplayer-controls">
-              <div class="artplayer-controls-left"></div>
-              <div class="artplayer-controls-right"></div>
-            </div>
+        <video class="artplayer-video" webkit-playsinline playsinline></video>
+        <div class="artplayer-subtitle"></div>
+        <div class="artplayer-layers"></div>
+        <div class="artplayer-mask"></div>
+        <div class="artplayer-bottom">
+          <div class="artplayer-progress"></div>
+          <div class="artplayer-controls">
+            <div class="artplayer-controls-left"></div>
+            <div class="artplayer-controls-right"></div>
           </div>
-          <div class="artplayer-loading"></div>
-          <div class="artplayer-notice"></div>
         </div>
+        <div class="artplayer-loading"></div>
+        <div class="artplayer-notice"></div>
       `;
-    refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
     refs.$video = refs.$container.querySelector('.artplayer-video');
     refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
     refs.$bottom = refs.$container.querySelector('.artplayer-bottom');

src/utils/index.js

@@ -10,14 +10,6 @@ export function clamp(num, a, b) {
   return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
 }
 
-export function request(url) {
-  return fetch(url)
-    .then(response => response.arrayBuffer())
-    .catch(err => {
-      throw new ArtPlayerError(err.message);
-    });
-}
-
 export function getExt(url) {
   if (url.includes('?')) {
     return getExt(url.split('?')[0]);