Home Explore Help
Register Sign In
lqb
/
DPlayer
mirror of https://gitee.com/mirrors/DPlayer.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

fix progress bar and video playing position function

1061706520@qq.com 7 years ago
parent
49567a828c
commit
62d9d9f433
8 changed files with 128 additions and 7 deletions
Split View Show Diff Stats
  1. 2 1
      .gitignore
  2. 40 0
      demo/demo.css
  3. 40 0
      demo/demo.js
  4. 7 0
      demo/index.html
  5. 3 0
      src/css/player.scss
  6. 4 4
      src/js/controller.js
  7. 2 2
      src/js/setting.js
  8. 30 0
      src/js/utils.js

+ 2 - 1
.gitignore
View File 

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

+ 40 - 0
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 - 0
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 - 0
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 - 0
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,

+ 4 - 4
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, () => {

+ 2 - 2
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 - 0
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,