update style

src/i18n.js

@@ -11,7 +11,7 @@ const i18nMap = {
 
 export default class I18n {
   constructor({ option }) {
-    this.language = i18nMap[option.lang.toLowerCase()] || i18nMap.en;
+    this.language = i18nMap[option.lang.toLowerCase()] || {};
   }
 
   get(key) {

src/player.js

@@ -11,7 +11,7 @@ export default class Player {
   init() {
     const { option } = this.art;
     const { $video } = this.art.refs;
-    $video.controls = true;
+    $video.controls = false;
     $video.poster = option.poster;
     $video.volume = clamp(option.volume, 0, 1);
     $video.autoplay = option.autoplay;

src/style/index.scss

@@ -5,6 +5,7 @@
     width: 100%;
     height: 100%;
     text-align: left;
+    overflow: hidden;
     user-select: none;
 
     .artplayer-video {
@@ -48,4 +49,24 @@
             text-decoration: none;
         }
     }
+
+    .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;
+        }
+    }
 }

src/template.js

@@ -9,8 +9,8 @@ export default class Template {
     refs.$container.innerHTML = `
         <div class="artplayer-wrap">
           <video class="artplayer-video" webkit-playsinline playsinline></video>
-          <div class="artplayer-controls"></div>
           <div class="artplayer-layers"></div>
+          <div class="artplayer-controls"></div>
           <div class="artplayer-loading"></div>
           <div class="artplayer-notice"></div>
         </div>