eplayer 1.6.8 → 1.6.10

package/docs/eplayer.js

@@ -21,7 +21,7 @@ class Eplayer extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['src', 'type', 'danma', 'live']
+    return ['src', 'type', 'danma', 'live','cover']
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -52,6 +52,8 @@ class Eplayer extends HTMLElement {
     }
     if (name === 'cover') {
       this.cover = newVal
+      this.$('.rotate-img').setAttribute('src', newVal)
+      this.$('.cover').style.background=`url(${newVal || ''}) center/cover no-repeat #fff`
     }
   }
 
@@ -90,14 +92,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')
     }
@@ -352,16 +357,7 @@ class Eplayer extends HTMLElement {
           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;
           position: relative;
@@ -543,14 +539,79 @@ 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>
-        <img src="${this.cover || ''}" class="cover-img"/>
+        <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">
@@ -587,6 +648,7 @@ class Eplayer extends HTMLElement {
     }).appendChild(template.content.cloneNode(true))
 
     const doms = [
+      '.img-container',
       '.video',
       '.mark',
       '.playing',
@@ -609,7 +671,9 @@ class Eplayer extends HTMLElement {
       '.speed',
       '.pip',
       '.danmaku',
-      '.speed-indicator'
+      '.speed-indicator',
+      '.rotate-img',
+      '.cover'
     ]
 
     for (const key of doms) {

package/docs/index.html

@@ -66,7 +66,7 @@
   <div class="wrapper">
     <e-player id="ep"
       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>
@@ -98,7 +98,13 @@
       }
     }
 
-    init()
+setTimeout(() => {
+  console.log(123)
+  document.querySelector('e-player').setAttribute('cover','https://dd-static.jd.com/ddimgp/jfs/t20261103/331442/3/18576/2295463/68da8cdcF3f9f05fd/790caba1cab6753d.png')
+
+}, 200);
+
+    // init()
   </script>
   <!-- <script src="./pic.js"></script> -->
 </body>

package/package.json

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