feat: mobile play button

src/css/controller.scss

@@ -652,3 +652,21 @@
         }
     }
 }
+
+.dplayer-mobile-play {
+    display: none;
+    width: 50px;
+    height: 50px;
+    border: none;
+    background-color: transparent;
+    outline: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0;
+    opacity: 0.8;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}

src/css/player.scss

@@ -166,7 +166,8 @@
     &.dplayer-mobile {
         .dplayer-controller .dplayer-icons {
             .dplayer-volume,
-            .dplayer-camera-icon {
+            .dplayer-camera-icon,
+            .dplayer-play-icon {
                 display: none;
             }
             .dplayer-full .dplayer-full-in-icon {
@@ -178,6 +179,16 @@
         .dplayer-bar-time {
             display: none;
         }
+
+        &.dplayer-hide-controller {
+            .dplayer-mobile-play {
+                display: none;
+            }
+        }
+
+        .dplayer-mobile-play {
+            display: block;
+        }
     }
 }
 

src/js/controller.js

@@ -40,6 +40,10 @@ class Controller {
             this.player.toggle();
         });
 
+        this.player.template.mobilePlayButton.addEventListener('click', () => {
+            this.player.toggle();
+        });
+
         if (!utils.isMobile) {
             this.player.template.videoWrap.addEventListener('click', () => {
                 this.player.toggle();

src/js/player.js

@@ -179,11 +179,12 @@ class DPlayer {
      */
     play() {
         this.paused = false;
-        if (this.video.paused) {
+        if (this.video.paused && !utils.isMobile) {
             this.bezel.switch(Icons.play);
         }
 
         this.template.playButton.innerHTML = Icons.pause;
+        this.template.mobilePlayButton.innerHTML = Icons.pause;
 
         const playedPromise = Promise.resolve(this.video.play());
         playedPromise
@@ -213,11 +214,12 @@ class DPlayer {
         this.paused = true;
         this.container.classList.remove('dplayer-loading');
 
-        if (!this.video.paused) {
+        if (!this.video.paused && !utils.isMobile) {
             this.bezel.switch(Icons.pause);
         }
 
         this.template.playButton.innerHTML = Icons.play;
+        this.template.mobilePlayButton.innerHTML = Icons.play;
         this.video.pause();
         this.timer.disable('loading');
         this.container.classList.remove('dplayer-playing');

src/js/template.js

@@ -1,5 +1,6 @@
 import Icons from './icons';
 import tplPlayer from '../template/player.art';
+import utils from './utils';
 
 class Template {
     constructor(options) {
@@ -16,6 +17,7 @@ class Template {
             index: this.index,
             tran: this.tran,
             icons: Icons,
+            mobile: utils.isMobile,
             video: {
                 current: true,
                 pic: this.options.video.pic,
@@ -41,6 +43,7 @@ class Template {
         this.video = this.container.querySelector('.dplayer-video-current');
         this.bezel = this.container.querySelector('.dplayer-bezel-icon');
         this.playButton = this.container.querySelector('.dplayer-play-icon');
+        this.mobilePlayButton = this.container.querySelector('.dplayer-mobile-play');
         this.videoWrap = this.container.querySelector('.dplayer-video-wrap');
         this.controllerMask = this.container.querySelector('.dplayer-controller-mask');
         this.ptime = this.container.querySelector('.dplayer-ptime');

src/template/player.art

@@ -259,4 +259,7 @@
         </div>
     {{ /each }}
 </div>
-<div class="dplayer-notice"></div>
+<div class="dplayer-notice"></div>
+<button class="dplayer-mobile-play">
+    {{@ icons.play }}
+</button>