eplayer 1.6.5 → 1.6.8

package/docs/eplayer.js

@@ -4,8 +4,17 @@ class Eplayer extends HTMLElement {
     this.doms = {}
     this.src = this.getAttribute('src')
     this.type = this.getAttribute('type')
+    this.cover = this.getAttribute('cover')
     this.live = JSON.parse(this.getAttribute('live'))
     this.danmaku = null
+    this.subs = []
+
+    // 添加长按右箭头3倍速相关状态
+    this.rightKeyHoldTimer = null
+    this.rightKeyPressTime = null
+    this.originalPlaybackRate = 1
+    this.isRightKeyPressed = false
+    this.isSpeedModeActive = false
 
     this.init()
     this.stream()
@@ -36,11 +45,14 @@ class Eplayer extends HTMLElement {
         this.$('.time').style.display = 'inline-block'
       }
     }
-    if (name === 'danma') {
+    if (name === 'danmu') {
       this.danmaku.add({
         msg: newVal
       })
     }
+    if (name === 'cover') {
+      this.cover = newVal
+    }
   }
 
   $(key) {
@@ -82,10 +94,12 @@ class Eplayer extends HTMLElement {
       this.video.play()
       this.danmaku.resume()
       this.$('.is-play').setAttribute('icon-id', 'pause')
+      this.emit('play')
     } else {
       this.video.pause()
       this.danmaku.pause()
       this.$('.is-play').setAttribute('icon-id', 'play')
+      this.emit('pause')
     }
   }
 
@@ -112,64 +126,143 @@ class Eplayer extends HTMLElement {
   }
 
   progress(e) {
-    let offset = e.offsetX / this.$('.progress').offsetWidth
-    this.video.currentTime = this.video.duration * offset
+    const progressBarRect = this.$('.progress').getBoundingClientRect()
+    let clickX = e.clientX - progressBarRect.left
+    clickX = Math.max(0, Math.min(clickX, progressBarRect.width))
+    const offsetRatio = clickX / progressBarRect.width
+
+    this.video.currentTime = this.video.duration * offsetRatio
+    this.$('.now').innerHTML = getTimeStr(this.video.currentTime)
+    this.$('.current').style.width = offsetRatio * 100 + '%'
   }
 
   down(e) {
-    this.disX = e.clientX - this.$('.dot').offsetLeft
+    e.preventDefault()
     this.moving = true
-    document.onpointermove = (e) => this.move(e)
-    document.onpointerup = () => {
-      this.moveing = false
-      document.onpointermove = null
-      document.onpointerup = null
-    }
+    const progressBarRect = this.$('.progress').getBoundingClientRect()
+    this.progressBarWidth = progressBarRect.width
+    this.initialClientX = e.clientX
+    const initialOffsetRatio = this.video.currentTime / this.video.duration
+    this.initialOffsetPixels = initialOffsetRatio * this.progressBarWidth
+
+    document.addEventListener('pointermove', this.handleMove)
+    document.addEventListener('pointerup', this.handleUp, { once: true })
+  }
+
+  handleMove = (e) => {
+    if (!this.moving) return
+
+    const deltaX = e.clientX - this.initialClientX
+    let newOffsetPixels = this.initialOffsetPixels + deltaX
+    newOffsetPixels = Math.max(0, Math.min(newOffsetPixels, this.progressBarWidth))
+
+    this.$('.current').style.width = (newOffsetPixels / this.progressBarWidth) * 100 + '%'
+
+    const newTime = (newOffsetPixels / this.progressBarWidth) * this.video.duration
+    this.video.currentTime = Math.max(0, Math.min(newTime, this.video.duration))
+
+    this.$('.now').innerHTML = getTimeStr(this.video.currentTime)
+  }
+
+  handleUp = (e) => {
+    this.moving = false
+    document.removeEventListener('pointermove', this.handleMove)
+    delete this.progressBarWidth
+    delete this.initialClientX
+    delete this.initialOffsetPixels
   }
 
   move(e) {
     let offset = e.clientX - this.disX + 12
     if (offset < 0) offset = 0
     if (offset > this.$('.progress').clientWidth) {
-      this.offset = this.$('.progress').clientWidth
+      offset = this.$('.progress').clientWidth
     }
     this.$('.current').style.width = offset + 'px'
     this.video.currentTime = (offset / this.$('.progress').clientWidth) * this.video.duration
-    document.onpointermove = null
-    setTimeout((document.onpointermove = (e) => e && this.move(e)), 30)
+    this.$('.now').innerHTML = getTimeStr(this.video.currentTime)
   }
 
   alow() {
     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)
+    if (!this.cover) {
+      this.timer = setTimeout(() => {
+        this.$('.eplayer').classList.remove('hover')
+      }, 5000)
+    }
   }
 
   keydown(e) {
+    e.preventDefault()
     switch (e.keyCode) {
-      case 37:
-        this.video.currentTime -= 10
+      case 37: // 左箭头 - 后退10秒
+        this.video.currentTime = Math.max(0, this.video.currentTime - 10)
         break
-      case 39:
-        this.video.currentTime += 10
+      case 39: // 右箭头 - 前进10秒 (支持长按3倍速)
+        if (!this.isRightKeyPressed) {
+          this.isRightKeyPressed = true
+          this.rightKeyPressTime = Date.now()
+          this.originalPlaybackRate = this.video.playbackRate
+
+          // 设置定时器，如果持续按住超过500ms则开启3倍速
+          this.rightKeyHoldTimer = setTimeout(() => {
+            this.isSpeedModeActive = true
+            this.video.playbackRate = 3
+            this.$('.speed').innerText = '3x'
+            this.$('.speed-indicator').style.display = 'block'
+          }, 500)
+        }
         break
-      case 38:
-        try {
-          this.video.volume = parseInt(this.video.volume * 100) / 100 + 0.05
-        } catch (e) { }
+      case 38: // 上箭头 - 增加音量5%
+        e.preventDefault()
+        this.video.volume = Math.min(1, this.video.volume + 0.05)
         break
-      case 40:
-        try {
-          this.video.volume = parseInt(this.video.volume * 100) / 100 - 0.05
-        } catch (e) { }
+      case 40: // 下箭头 - 减少音量5%
+        e.preventDefault()
+        this.video.volume = Math.max(0, this.video.volume - 0.05)
         break
-      case 32:
+      case 32: // 空格键 - 播放/暂停
+        e.preventDefault()
         this.play()
         break
+      case 77: // M键 - 静音/取消静音
+        this.volume()
+        break
+      default:
+    }
+  }
+
+  keyup(e) {
+    switch (e.keyCode) {
+      case 39: // 右箭头松开
+        if (this.isRightKeyPressed) {
+          const pressDuration = Date.now() - this.rightKeyPressTime
+          this.isRightKeyPressed = false
+
+          // 清除定时器
+          if (this.rightKeyHoldTimer) {
+            clearTimeout(this.rightKeyHoldTimer)
+            this.rightKeyHoldTimer = null
+          }
+
+          // 判断是短按还是长按
+          if (pressDuration < 500 && !this.isSpeedModeActive) {
+            // 短按：只快进10秒
+            this.video.currentTime = Math.min(this.video.duration, this.video.currentTime + 10)
+          } else if (this.isSpeedModeActive) {
+            // 长按结束：恢复原播放速度并隐藏提示
+            this.video.playbackRate = this.originalPlaybackRate
+            this.$('.speed').innerText = this.originalPlaybackRate + 'x'
+            this.$('.speed-indicator').style.display = 'none'
+            this.isSpeedModeActive = false
+          }
+
+          // 重置状态
+          this.rightKeyPressTime = null
+        }
+        break
       default:
     }
   }
@@ -242,12 +335,32 @@ class Eplayer extends HTMLElement {
           list-style:none;
         }
         .eplayer,video{
-        font-family:'黑体';
+          font-family:'黑体';
           height:100%;
           width:100%;
           color:var(--icons,rgba(255,255,255,0.6));
           font-size:12px;
-          background:#000
+          background:var(--bg,#000);       
+        }
+        .eplayer .cover{
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background:url(${this.cover || ''}) center/cover no-repeat #fff;
+          filter:blur(8px);
+        }
+        .eplayer .cover-img{
+          position: absolute;
+          z-index: 1;
+          width:250px;
+          height:250px;
+          border-radius:125px;
+          left:50%;
+          top:50%;
+          transform:translate(-50%,-50%);
         }
         .eplayer{
           user-select:none;
@@ -258,14 +371,17 @@ class Eplayer extends HTMLElement {
           position:absolute;
           left:0;
           right:0;
-          bottom:0;
-          background:linear-gradient(transparent,rgba(0,0,0,.5));
-          transition: .3s ease-out;
           bottom:-34px;
-          z-index:1;   
+          background:linear-gradient(transparent,rgba(0,0,0,.5));
+          transition: bottom .3s ease-out, opacity .3s ease-out;
+          opacity: 0;
+          pointer-events: none;
+          z-index:1000;
         }
-        .hover:hover .controls{
+        .hover .controls{
           bottom:0;
+          opacity: 1;
+          pointer-events: auto;
         }
         .progress{
           display:${this.live ? 'none' : 'block'};
@@ -392,11 +508,28 @@ class Eplayer extends HTMLElement {
           bottom: 0;
           pointer-events: none;
           overflow: hidden;
-          z-index: 999;
+          z-index: 0;
           height:100%;
           width:100%;
         }
 
+        .speed-indicator {
+          position: absolute;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: rgba(148, 108, 230, 0.9);
+          color: white;
+          padding: 8px 16px;
+          border-radius: 20px;
+          font-size: 14px;
+          font-weight: bold;
+          z-index: 999;
+          display: none;
+          pointer-events: none;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        }
+
         iconpark-icon{
         margin-right:5px;
         cursor:pointer;
@@ -416,7 +549,10 @@ class Eplayer extends HTMLElement {
       <div class="eplayer hover">
       <div class="danmaku"></div>
         <video id="video" class="video" src="${this.src || ''}"></video>
+        <div class="cover"></div>
+        <img src="${this.cover || ''}" class="cover-img"/>
         <div class="mark loading"></div>
+        <div class="speed-indicator">倍速中</div>
         <div class="controls">
           <div class="progress">
             <b class="bg"></b>
@@ -433,7 +569,7 @@ class Eplayer extends HTMLElement {
               </span>
             </div>
             <div class="right">
-              <em class="speed">倍速</em>
+              <em class="speed">1x</em>
               <em class="pip">画中画</em>
               <iconpark-icon icon-id="volume-ok" size="2rem" class="is-volume"></iconpark-icon>
               <iconpark-icon icon-id="web-fullscreen" size="2rem"></iconpark-icon>
@@ -472,23 +608,14 @@ class Eplayer extends HTMLElement {
       '.panel',
       '.speed',
       '.pip',
-      '.danmaku'
+      '.danmaku',
+      '.speed-indicator'
     ]
 
     for (const key of doms) {
       let dom = this.shadowRoot.querySelectorAll(key)
       this.doms[key] = dom.length > 1 ? [...dom] : dom[0]
     }
-
-
-    for (const name in Eplayer.plugins) {
-      const cb = Eplayer.plugins[name]
-      let node = document.createElement('li')
-      node.innerText = name
-      let panel = this.$('.panel')
-      panel.appendChild(node)
-      node.addEventListener('click', () => cb(this.shadowRoot))
-    }
   }
 
   connectedCallback() {
@@ -510,6 +637,7 @@ class Eplayer extends HTMLElement {
       '.speed': this.speed,
       '.bg': this.progress,
       '.buffer': this.progress,
+      '.current': this.progress,
       '.pip': this.pip,
     })
     this.delegate('pointerdown', {
@@ -522,9 +650,33 @@ class Eplayer extends HTMLElement {
         this.full()
       },
     })
-    this.delegate('keydown', this.keydown)
+
+    // 使用全局键盘监听以确保按键事件能在任何地方被捕获
+    this.keydownHandler = this.keydown.bind(this)
+    this.keyupHandler = this.keyup.bind(this)
+    document.addEventListener('keydown', this.keydownHandler)
+    document.addEventListener('keyup', this.keyupHandler)
+
     this.delegate('mousemove', this.alow)
-    this.$('.eplayer').oncontextmenu = () => false
+  }
+
+  disconnectedCallback() {
+    // 清理全局键盘事件监听器
+    if (this.keydownHandler) {
+      document.removeEventListener('keydown', this.keydownHandler)
+    }
+    if (this.keyupHandler) {
+      document.removeEventListener('keyup', this.keyupHandler)
+    }
+
+    // 清理长按定时器和状态
+    if (this.rightKeyHoldTimer) {
+      clearTimeout(this.rightKeyHoldTimer)
+      this.rightKeyHoldTimer = null
+    }
+    this.isRightKeyPressed = false
+    this.isSpeedModeActive = false
+    this.rightKeyPressTime = null
   }
 
   delegate(type, map) {
@@ -546,14 +698,20 @@ class Eplayer extends HTMLElement {
     }
   }
 
+  emit(name) {
+    const fn = Eplayer.subs[name]
+    fn && fn.call(this, this.shadowRoot)
+  }
+
 }
 
-Eplayer.plugins = {}
+Eplayer.subs = {}
 
 Eplayer.use = function (name, cb) {
-  this.plugins[name] = cb
+  this.subs[name] = cb
 }
 
+
 function getTimeStr(time) {
   let h = Math.floor(time / 3600)
   let m = Math.floor((time % 3600) / 60)
@@ -574,8 +732,4 @@ function isFullScreen() {
   document.head.appendChild(link)
 })()
 
-Eplayer.use('github源码', (ep) => {
-  window.location.href = 'https://github.com/132yse/eplayer'
-})
-
 customElements.define('e-player', Eplayer)

package/docs/index.html

@@ -57,11 +57,16 @@
     .wrapper a:nth-child(3) {
       background: #1ea6e9;
     }
+
+    e-player {
+      --bg:#fff
+    }
   </style>
 
   <div class="wrapper">
     <e-player id="ep"
-      src="https://a1.alibabausercontent.com/prod/feupload/user/edos8/2f0e7af0-29f1-11ef-b3cd-818e64ac843d.mp4">
+      src="https://aod.cos.tx.xmcdn.com/storages/9976-audiofreehighqps/C9/1C/GAqhF9kMsE7kACAAAAQZZzo_.wav"
+      cover="https://dd-static.jd.com/ddimgp/jfs/t20261103/331442/3/18576/2295463/68da8cdcF3f9f05fd/790caba1cab6753d.png">
     </e-player>
   </div>
   <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>

package/package.json

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