diff --git a/src/css/controller.scss b/src/css/controller.scss index ba99458..88cf7c6 100644 --- a/src/css/controller.scss +++ b/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%); +} \ No newline at end of file diff --git a/src/css/player.scss b/src/css/player.scss index c2e29a6..3eed575 100644 --- a/src/css/player.scss +++ b/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; + } } } diff --git a/src/js/controller.js b/src/js/controller.js index 832e0fd..4bf8d3a 100644 --- a/src/js/controller.js +++ b/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(); diff --git a/src/js/player.js b/src/js/player.js index 8751f14..81404b3 100644 --- a/src/js/player.js +++ b/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'); diff --git a/src/js/template.js b/src/js/template.js index 72a5f5e..ea2aad4 100644 --- a/src/js/template.js +++ b/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'); diff --git a/src/template/player.art b/src/template/player.art index e837ec3..252a7d9 100644 --- a/src/template/player.art +++ b/src/template/player.art @@ -259,4 +259,7 @@ {{ /each }} -
\ No newline at end of file +
+ \ No newline at end of file