xiaoxue_admin
/
DPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize thumbnails and bar-time in mobile

This commit is contained in:
DIYgod 2018-01-20 21:15:03 +08:00
parent d753f8289a
commit 493c95fb0c
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
3 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "dplayer",
"version": "1.21.0",
"version": "1.21.1",
"description": "Wow, such a lovely HTML5 danmaku video player",
"main": "dist/DPlayer.min.js",
"style": "dist/DPlayer.min.css",

19
src/css/player.scss
View File

@ -140,15 +140,20 @@
width: 100%;
height: 100%;
}
&.dplayer-mobile .dplayer-controller .dplayer-icons {
.dplayer-volume,
.dplayer-camera-icon {
display: none;
&.dplayer-mobile {
.dplayer-controller .dplayer-icons {
.dplayer-volume,
.dplayer-camera-icon {
display: none;
}
.dplayer-full .dplayer-full-in-icon {
position: static;
display: inline-block;
}
}
.dplayer-full .dplayer-full-in-icon {
position: static;
display: inline-block;
.dplayer-bar-time {
display: none;
}
}
}

31
src/js/controller.js
View File

@ -105,6 +105,9 @@ class Controller {
return;
}
const time = this.player.video.duration * (tx / this.player.template.playedBarWrap.offsetWidth);
if (utils.isMobile) {
this.thumbnails && this.thumbnails.show();
}
this.thumbnails && this.thumbnails.move(tx);
this.player.template.playedBarTime.style.left = `${(tx - 20)}px`;
this.player.template.playedBarTime.innerText = utils.secondToTime(time);
@ -112,19 +115,27 @@ class Controller {
}
});
this.player.template.playedBarWrap.addEventListener('mouseenter', () => {
if (this.player.video.duration) {
this.thumbnails && this.thumbnails.show();
this.player.template.playedBarTime.classList.remove('hidden');
this.player.template.playedBarWrap.addEventListener(utils.nameMap.dragEnd, () => {
if (utils.isMobile) {
this.thumbnails && this.thumbnails.hide();
}
});
this.player.template.playedBarWrap.addEventListener('mouseleave', () => {
if (this.player.video.duration) {
this.thumbnails && this.thumbnails.hide();
this.player.template.playedBarTime.classList.add('hidden');
}
});
if (!utils.isMobile) {
this.player.template.playedBarWrap.addEventListener('mouseenter', () => {
if (this.player.video.duration) {
this.thumbnails && this.thumbnails.show();
this.player.template.playedBarTime.classList.remove('hidden');
}
});
this.player.template.playedBarWrap.addEventListener('mouseleave', () => {
if (this.player.video.duration) {
this.thumbnails && this.thumbnails.hide();
this.player.template.playedBarTime.classList.add('hidden');
}
});
}
}
initFullButton () {