eplayer 1.6.3 → 1.6.5

package/docs/eplayer.js

@@ -100,6 +100,7 @@ class Eplayer extends HTMLElement {
   }
 
   update() {
+    if (this.moving) return
     let cTime = getTimeStr(this.video.currentTime)
     if (this.video.buffered.length) {
       let bufferEnd = this.video.buffered.end(this.video.buffered.length - 1)
@@ -116,19 +117,21 @@ class Eplayer extends HTMLElement {
   }
 
   down(e) {
-    this.disX = e.clientX - this.$('.cycle').offsetLeft
+    this.disX = e.clientX - this.$('.dot').offsetLeft
+    this.moving = true
     document.onpointermove = (e) => this.move(e)
     document.onpointerup = () => {
+      this.moveing = false
       document.onpointermove = null
       document.onpointerup = null
     }
   }
 
   move(e) {
-    let offset = e.clientX - this.disX + 7
+    let offset = e.clientX - this.disX + 12
     if (offset < 0) offset = 0
     if (offset > this.$('.progress').clientWidth) {
-      offset = this.$('.progress').clientWidth
+      this.offset = this.$('.progress').clientWidth
     }
     this.$('.current').style.width = offset + 'px'
     this.video.currentTime = (offset / this.$('.progress').clientWidth) * this.video.duration
@@ -137,8 +140,13 @@ class Eplayer extends HTMLElement {
   }
 
   alow() {
-    // this.$('.controls').style.bottom = 0
+    clearTimeout(this.timer)
     this.$('.mark').style.cursor = 'default'
+    this.$('.eplayer').classList.add('hover')
+    this.timer = setTimeout(() => {
+      this.$('.eplayer').classList.remove('hover')
+      this.$('.mark').style.cursor = 'none'
+    }, 5000)
   }
 
   keydown(e) {
@@ -218,7 +226,7 @@ class Eplayer extends HTMLElement {
   }
 
   speed(e) {
-    this.video.playbackRate === 2 ? (this.video.playbackRate = 1) : (this.video.playbackRate = this.video.playbackRate + 0.5)
+    this.video.playbackRate === 3 ? (this.video.playbackRate = 1) : (this.video.playbackRate = this.video.playbackRate + 0.25)
     this.$('.speed').innerText = this.video.playbackRate + 'x'
   }
 
@@ -256,9 +264,9 @@ class Eplayer extends HTMLElement {
           bottom:-34px;
           z-index:1;   
         }
-          .eplayer:hover .controls{
+        .hover:hover .controls{
           bottom:0;
-          }
+        }
         .progress{
           display:${this.live ? 'none' : 'block'};
           position:relative;
@@ -271,7 +279,7 @@ class Eplayer extends HTMLElement {
         .progress:hover .bg,.progress:hover .current,.progress:hover .buffer{
           height:6px;
         }
-          .progress:hover .dot,.progress:hover .cycle{
+          .progress:hover .dot{
           display:block;
         }
         .options{
@@ -405,7 +413,7 @@ class Eplayer extends HTMLElement {
         
       </style>
       
-      <div class="eplayer">
+      <div class="eplayer hover">
       <div class="danmaku"></div>
         <video id="video" class="video" src="${this.src || ''}"></video>
         <div class="mark loading"></div>
@@ -433,7 +441,6 @@ class Eplayer extends HTMLElement {
             </div>
           </div>
         </div>
-        <iconpark-icon icon-id="play"></iconpark-icon>
         <div class="panel"></div>
       </div>
     `
@@ -455,7 +462,7 @@ class Eplayer extends HTMLElement {
       '.buffer',
       '.is-play',
       '.is-volume',
-      '.cycle',
+      '.dot',
       '.progress',
       '.controls',
       '.line',
@@ -506,7 +513,7 @@ class Eplayer extends HTMLElement {
       '.pip': this.pip,
     })
     this.delegate('pointerdown', {
-      '.cycle': this.down,
+      '.dot': this.down,
       '.mark': this.panel,
     })
     this.delegate('dblclick', {
@@ -516,7 +523,7 @@ class Eplayer extends HTMLElement {
       },
     })
     this.delegate('keydown', this.keydown)
-    this.delegate('pointerdown', this.alow)
+    this.delegate('mousemove', this.alow)
     this.$('.eplayer').oncontextmenu = () => false
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eplayer",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "A web-components html5 video player facing future",
   "main": "./docs/eplayer.js",
   "module": "./docs/eplayer.js",