update style

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;
+        }
+    }
 }