eplayer 1.6.9 → 1.6.11

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`
     }
   }
 
@@ -94,13 +96,13 @@ class Eplayer extends HTMLElement {
     if (this.video.paused) {
       this.video.play()
       this.danmaku.resume()
-      this.$('.img-container').classList.add('is-playing');
+      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.$('.img-container').classList.remove('is-playing')
       this.$('.is-play').setAttribute('icon-id', 'play')
       this.emit('pause')
     }
@@ -327,6 +329,7 @@ class Eplayer extends HTMLElement {
   }
 
   init() {
+    console.log(this.cover)
     let html = `
       <style>
         @import "https://at.alicdn.com/t/c/font_836948_ro9xopmggai.css";
@@ -541,17 +544,17 @@ class Eplayer extends HTMLElement {
                 .eplayer .img-container{
           position: absolute;
           z-index: 1;
-          width:250px;
-          height:250px;
-          border-radius:125px;
+          height:60%;
+          aspect-ratio: 1/1;
+          border-radius:50%;
           left:50%;
           top:50%;
           transform:translate(-50%,-50%);
         }
 
         .rotate-img {
-      width: 250px;
-      height: 250px;
+      aspect-ratio: 1/1;
+      height: 100%;
       border-radius: 50%;
       animation: rotate 10s linear infinite;
       object-fit: cover;
@@ -629,10 +632,10 @@ class Eplayer extends HTMLElement {
             </div>
             <div class="right">
               <em class="speed">1x</em>
-              <em class="pip">画中画</em>
+              ${this.cover ? `<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>
-              <iconpark-icon icon-id="fullscreen" size="2rem" class="fullscreen"></iconpark-icon>
+              ${this.cover ? `<iconpark-icon icon-id="web-fullscreen" size="2rem"></iconpark-icon>`:''}
+              ${this.cover ?`<iconpark-icon icon-id="fullscreen" size="2rem" class="fullscreen"></iconpark-icon>`:""}
             </div>
           </div>
         </div>
@@ -669,7 +672,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.9",
+  "version": "1.6.11",
   "description": "A web-components html5 video player facing future",
   "main": "./docs/eplayer.js",
   "module": "./docs/eplayer.js",