eplayer 1.6.7 → 1.6.9

package/docs/eplayer.js

@@ -4,10 +4,18 @@ 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()
   }
@@ -37,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) {
@@ -79,14 +90,17 @@ class Eplayer extends HTMLElement {
   }
 
   play() {
+    console.log(this.$('.img-container'))
     if (this.video.paused) {
       this.video.play()
       this.danmaku.resume()
+      this.$('.img-container').classList.add('is-playing');
       this.$('.is-play').setAttribute('icon-id', 'pause')
       this.emit('play')
     } else {
       this.video.pause()
       this.danmaku.pause()
+      this.$('.img-container').classList.remove('is-playing');
       this.$('.is-play').setAttribute('icon-id', 'play')
       this.emit('pause')
     }
@@ -115,64 +129,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:
     }
   }
@@ -245,13 +338,24 @@ 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{
           user-select:none;
           position: relative;
@@ -261,14 +365,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'};
@@ -395,11 +502,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;
@@ -413,13 +537,81 @@ class Eplayer extends HTMLElement {
           margin:0 10px 0 8px;
           cursor: pointer;
         }
-        
+
+                .eplayer .img-container{
+          position: absolute;
+          z-index: 1;
+          width:250px;
+          height:250px;
+          border-radius:125px;
+          left:50%;
+          top:50%;
+          transform:translate(-50%,-50%);
+        }
+
+        .rotate-img {
+      width: 250px;
+      height: 250px;
+      border-radius: 50%;
+      animation: rotate 10s linear infinite;
+      object-fit: cover;
+      animation-play-state: paused; /* 默认暂停 */
+    }
+
+    .img-container::after,
+    .img-container::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      animation: wave 2s infinite;
+      animation-play-state: paused; /* 默认暂停 */
+    }
+
+    .img-container::after {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    .img-container::before {
+      background: rgba(255, 255, 255, 0.2);
+      animation-delay: 1s;
+    }
+
+    /* 播放状态 */
+    .is-playing .rotate-img,
+    .is-playing::after,
+    .is-playing::before {
+      animation-play-state: running;
+    }
+
+    @keyframes rotate {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    @keyframes wave {
+      0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translate(-50%, -50%) scale(2);
+        opacity: 0;
+      }
+    }
       </style>
       
       <div class="eplayer hover">
       <div class="danmaku"></div>
         <video id="video" class="video" src="${this.src || ''}"></video>
+        <div class="cover"></div>
+        <div class="img-container"><img src="${this.cover || ''}" class="rotate-img"/></div>
         <div class="mark loading"></div>
+        <div class="speed-indicator">倍速中</div>
         <div class="controls">
           <div class="progress">
             <b class="bg"></b>
@@ -436,7 +628,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>
@@ -454,6 +646,7 @@ class Eplayer extends HTMLElement {
     }).appendChild(template.content.cloneNode(true))
 
     const doms = [
+      '.img-container',
       '.video',
       '.mark',
       '.playing',
@@ -475,7 +668,8 @@ class Eplayer extends HTMLElement {
       '.panel',
       '.speed',
       '.pip',
-      '.danmaku'
+      '.danmaku',
+      '.speed-indicator'
     ]
 
     for (const key of doms) {
@@ -503,6 +697,7 @@ class Eplayer extends HTMLElement {
       '.speed': this.speed,
       '.bg': this.progress,
       '.buffer': this.progress,
+      '.current': this.progress,
       '.pip': this.pip,
     })
     this.delegate('pointerdown', {
@@ -515,10 +710,35 @@ 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)
   }
 
+  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) {
     const that = this
     if (typeof map === 'function') {
@@ -538,7 +758,7 @@ class Eplayer extends HTMLElement {
     }
   }
 
-  emit (name) {
+  emit(name) {
     const fn = Eplayer.subs[name]
     fn && fn.call(this, this.shadowRoot)
   }

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.7",
+  "version": "1.6.9",
   "description": "A web-components html5 video player facing future",
   "main": "./docs/eplayer.js",
   "module": "./docs/eplayer.js",