mirrors/DPlayer
1
0
Fork 0
mirror of https://github.com/DIYgod/DPlayer synced 2024-11-22 01:51:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix progress bar and video playing position function

Browse Source
This commit is contained in:
1061706520@qq.com 2018-07-19 14:53:26 +08:00
parent 49567a828c
commit 62d9d9f433
8 changed files with 128 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -4,4 +4,5 @@ demo2
npm-debug.log
DPlayer.log*
wxw
.vscode
.vscode
package-lock.json

40
demo/demo.css
View File

@ -2,6 +2,46 @@ body {
max-width: 700px;
margin: 0 auto;
padding: 45px 10px;
position: relative;
}
.show-dialog {
cursor: pointer;
border: 1px solid #f00;
width: 120px;
height: 40px;
line-height: 40px!important;
text-align: center;
border-radius: 4px;
}
.float-dplayer {
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.dplayer-container {
width: 700px;
height: 358px;
border: 1px solid #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-dialog {
position: absolute;
right: 40px;
top: 10px;
font-size: 40px!important;
font-weight: normal!important;
color: #fff;
cursor: pointer;
z-index: 100;
}
.example {

40
demo/demo.js
View File

@ -12,8 +12,48 @@ function animate () {
requestAnimationFrame(animate);
initPlayers();
handleEvent();
function handleEvent () {
document.getElementById('dplayer-dialog').addEventListener('click', (e) => {
const $clickDom = e.currentTarget;
const isShowStatus = $clickDom.getAttribute('data-show');
if (!!isShowStatus) {
document.getElementById('float-dplayer').style.display = 'none';
} else {
$clickDom.setAttribute('data-show', 1);
document.getElementById('float-dplayer').style.display = 'block';
}
});
document.getElementById('close-dialog').addEventListener('click', () => {
const $openDialogBtnDom = document.getElementById('dplayer-dialog');
$openDialogBtnDom.setAttribute('data-show', '');
document.getElementById('float-dplayer').style.display = 'none';
});
}
function initPlayers () {
// dplayer-float
window.dpFloat = new DPlayer({
container: document.getElementById('dplayer-container'),
preload: 'none',
screenshot: true,
video: {
url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
thumbnails: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
},
subtitle: {
url: 'subtitle test'
},
danmaku: {
id: '9E2E3368B56CDBB4',
api: 'https://api.prprpr.me/dplayer3/'
}
});
// dp1
window.dp1 = new DPlayer({
container: document.getElementById('dplayer1'),

7
demo/index.html
View File

@ -16,6 +16,13 @@
</head>
<body class="markdown-body">
<h2>在 dialog 中承载视频</h2>
<h3 id="dplayer-dialog" class="show-dialog">Show Dialog</h3>
<div id="float-dplayer" class="float-dplayer">
<div id="dplayer-container" class="dplayer-container"></div>
<h3 id="close-dialog" class="close-dialog">X</h3>
</div>
<h2 id="quick-start">Quick Start</h2>
<div class="example">
<div id="dplayer1"></div>

3
src/css/player.scss
View File

@ -26,6 +26,9 @@
z-index: 100000;
left: 0;
top: 0;
margin: 0;
padding: 0;
transform: translate(0, 0);
.dplayer-danmaku {
.dplayer-danmaku-top,

8
src/js/controller.js
View File

@ -74,7 +74,7 @@ class Controller {
initPlayedBar () {
const thumbMove = (e) => {
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.bar.set('played', percentage, 'width');
@ -84,7 +84,7 @@ class Controller {
const thumbUp = (e) => {
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.bar.set('played', percentage, 'width');
@ -154,7 +154,7 @@ class Controller {
const volumeMove = (event) => {
const e = event || window.event;
const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
this.player.volume(percentage);
};
const volumeUp = () => {
@ -165,7 +165,7 @@ class Controller {
this.player.template.volumeBarWrapWrap.addEventListener('click', (event) => {
const e = event || window.event;
const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
this.player.volume(percentage);
});
this.player.template.volumeBarWrapWrap.addEventListener(utils.nameMap.dragStart, () => {

4
src/js/setting.js
View File

@ -85,7 +85,7 @@ class Setting {
const danmakuMove = (event) => {
const e = event || window.event;
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.danmaku.opacity(percentage);
@ -98,7 +98,7 @@ class Setting {
this.player.template.danmakuOpacityBarWrapWrap.addEventListener('click', (event) => {
const e = event || window.event;
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.danmaku.opacity(percentage);

30
src/js/utils.js
View File

@ -39,6 +39,36 @@ const utils = {
return actualLeft - elementScrollLeft;
},
/**
* optimize control play progress
* optimize get element's view position,for float dialog video player
* getBoundingClientRect 在 IE8 及以下返回的值缺失 width、height 值
* getBoundingClientRect 在 Firefox 11 及以下返回的值会把 transform 的值也包含进去
* getBoundingClientRect 在 Opera 10.5 及以下返回的值缺失 width、height 值
*/
getBoundingClientRectViewLeft (element) {
const scrollTop = document.documentElement.scrollTop;
if (element.getBoundingClientRect) {
if (typeof this.getBoundingClientRectViewLeft.offset !== 'number') {
let temp = document.createElement('div');
temp.style.cssText = 'position:absolute;top:0;left:0;';
document.body.appendChild(temp);
this.getBoundingClientRectViewLeft.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
const rect = element.getBoundingClientRect();
const offset = this.getBoundingClientRectViewLeft.offset;
return rect.left + offset;
} else {
// not support getBoundingClientRect
return this.getElementViewLeft(element);
}
},
getScrollPosition () {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,