From 62d9d9f433955f0a63b120f48cdb2bf348b0d033 Mon Sep 17 00:00:00 2001 From: "1061706520@qq.com" <1061706520@qq.com> Date: Thu, 19 Jul 2018 14:53:26 +0800 Subject: [PATCH] fix progress bar and video playing position function --- .gitignore | 3 ++- demo/demo.css | 40 ++++++++++++++++++++++++++++++++++++++++ demo/demo.js | 40 ++++++++++++++++++++++++++++++++++++++++ demo/index.html | 7 +++++++ src/css/player.scss | 3 +++ src/js/controller.js | 8 ++++---- src/js/setting.js | 4 ++-- src/js/utils.js | 30 ++++++++++++++++++++++++++++++ 8 files changed, 128 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index 78757d0..71bb6a7 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ demo2 npm-debug.log DPlayer.log* wxw -.vscode \ No newline at end of file +.vscode +package-lock.json \ No newline at end of file diff --git a/demo/demo.css b/demo/demo.css index b068bf7..2155cb7 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -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 { diff --git a/demo/demo.js b/demo/demo.js index 834ae4f..d564077 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -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'), diff --git a/demo/index.html b/demo/index.html index a1d258e..2ddb300 100644 --- a/demo/index.html +++ b/demo/index.html @@ -16,6 +16,13 @@ +

在 dialog 中承载视频

+

Show Dialog

+
+
+

X

+
+

Quick Start

diff --git a/src/css/player.scss b/src/css/player.scss index 7b2af7c..c2e29a6 100644 --- a/src/css/player.scss +++ b/src/css/player.scss @@ -26,6 +26,9 @@ z-index: 100000; left: 0; top: 0; + margin: 0; + padding: 0; + transform: translate(0, 0); .dplayer-danmaku { .dplayer-danmaku-top, diff --git a/src/js/controller.js b/src/js/controller.js index 8af702f..f7024d8 100644 --- a/src/js/controller.js +++ b/src/js/controller.js @@ -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, () => { diff --git a/src/js/setting.js b/src/js/setting.js index 0404a34..003a241 100644 --- a/src/js/setting.js +++ b/src/js/setting.js @@ -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); diff --git a/src/js/utils.js b/src/js/utils.js index 0526325..0dfb8d7 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -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,