fix progress bar and video playing position function

6 years ago · 62d9d9f433
parent 49567a828c
commit 62d9d9f433
8 changed files with 128 additions and 7 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,4 +4,5 @@ demo2
 npm-debug.log
 DPlayer.log*
 wxw
-.vscode
+.vscode
+package-lock.json
--- 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 {
--- 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'),
--- a/demo/index.html
+++ b/demo/index.html
@ -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>
--- 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,
--- 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, () => {
--- 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);
--- 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,