eplayer 1.6.2 → 1.6.4

package/docs/eplayer.js

@@ -19,12 +19,12 @@ class Eplayer extends HTMLElement {
     if (name === 'src') {
       this.src = this.$('.video').src = newVal
       this.stream()
-      this.video.load()
+      this.$('.video').load()
     }
     if (name === 'type') {
       this.type = newVal
       this.stream()
-      this.video.load()
+      this.$('.video').load()
     }
     if (name === 'live') {
       this.live = JSON.parse(newVal)
@@ -81,29 +81,26 @@ class Eplayer extends HTMLElement {
     if (this.video.paused) {
       this.video.play()
       this.danmaku.resume()
-      this.$('.ep-video').style.display = 'none'
-      this.$('.is-play').classList.replace('ep-play', 'ep-pause')
+      this.$('.is-play').setAttribute('icon-id', 'pause')
     } else {
       this.video.pause()
       this.danmaku.pause()
-      this.$('.ep-video').style.display = 'block'
-      this.$('.is-play').classList.replace('ep-pause', 'ep-play')
+      this.$('.is-play').setAttribute('icon-id', 'play')
     }
   }
 
   volume() {
     if (this.video.muted) {
       this.video.muted = false
-
-      this.$('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
+      this.$('.is-volume').setAttribute('icon-id', 'volume-ok')
     } else {
       this.video.muted = true
-
-      this.$('.is-volume').classList.replace('ep-volume', 'ep-volume-off')
+      this.$('.is-volume').setAttribute('icon-id', 'volume-x')
     }
   }
 
   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)
@@ -120,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
@@ -141,13 +140,11 @@ class Eplayer extends HTMLElement {
   }
 
   alow() {
+    console.log(111)
     clearTimeout(this.timer)
-    this.$('.controls').style.bottom = 0
-    this.$('.ep-video').style.bottom = 70 + 'px'
     this.$('.mark').style.cursor = 'default'
     this.timer = setTimeout(() => {
-      this.$('.controls').style.bottom = -70 + 'px'
-      this.$('.ep-video').style.bottom = 25 + 'px'
+      this.$('.controls').style.bottom = -34 + 'px'
       this.$('.mark').style.cursor = 'none'
     }, 5000)
   }
@@ -178,7 +175,7 @@ class Eplayer extends HTMLElement {
   }
 
   ended() {
-    this.$('.is-play').classList.replace('ep-pause', 'ep-play')
+    // this.$('.is-play').classList.replace('ep-pause', 'ep-play')
   }
 
   full() {
@@ -245,6 +242,7 @@ class Eplayer extends HTMLElement {
           list-style:none;
         }
         .eplayer,video{
+        font-family:'黑体';
           height:100%;
           width:100%;
           color:var(--icons,rgba(255,255,255,0.6));
@@ -261,70 +259,45 @@ class Eplayer extends HTMLElement {
           left:0;
           right:0;
           bottom:0;
-          padding:10px;
           background:linear-gradient(transparent,rgba(0,0,0,.5));
-          transition: .3s ease-out;   
+          transition: .3s ease-out;
+          bottom:-34px;
           z-index:1;   
         }
+          .eplayer:hover .controls{
+          bottom:0;
+          animation: hidden 0s ease-in 5s forwards;
+          animation-fill-mode: forwards;
+          transition: .3s ease-out;
+          }
         .progress{
           display:${this.live ? 'none' : 'block'};
           position:relative;
-          bottom:15px;
+          bottom:5px;
           left:0;
           right:0;
           cursor:pointer;
+          transition: .3s ease-out;
+        }
+        .progress:hover .bg,.progress:hover .current,.progress:hover .buffer{
+          height:6px;
+        }
+          .progress:hover .dot{
+          display:block;
         }
         .options{
           display:flex;
           align-items:center;
         }
-        .epicon{
-          color:var(--icons,rgba(255,255,255,0.6));
-          padding:0 10px;
-        }
-        .epicon{
-          font-size:18px;
-          transition: .3s;
-          cursor:pointer;
-        }
-        .epicon:hover{
-          color:#fff;
-        }
         .time{
-        display:${this.live ? 'none' : 'inline-block'};
+          display:${this.live ? 'none' : 'inline-block'};
           position:relative;
-          top:-2px;
-        }
-        .time b{
-          font-weight:normal;
-        }
-        .lines{
-          padding:0 10px;
-          display:flex;
-          align-items: center;
-        }
-        .line{
-          padding:0 2px;
-          cursor:pointer
-        }
-        .line i{
-          width:4px;
-          border-radius:4px;
-          display: inline-block;
-          background: var(--icons,rgba(255,255,255,0.6));
-          height: 12px;
-          transform:scaleX(0.7);
-          transition: .3s;
-        }
-        .line:hover i{
-          height:14px;
-          background:var(--theme,#946ce6);
-        }
-        .active i{
-          background:var(--theme,#946ce6);
+          font-size:15px;
         }
         .left{
           flex:1;
+          display:flex;
+          align-items:center;
         }
         .right{
           flex:1;
@@ -337,6 +310,7 @@ class Eplayer extends HTMLElement {
           height:3px;
           position:absolute;
           top:0;
+          transition: .3s ease-out;
         }
         .bg{
           right:0;
@@ -349,29 +323,24 @@ class Eplayer extends HTMLElement {
           background:var(--buffer,rgba(255,255,255,.5));
         }
         .dot{
+          display:none;
           position:absolute;
           border-radius: 50%;
-          display: block;
-          background:var(--theme,#946ce6);
-          height: 9px;
-          width:9px;
-          right:-5px;
-          top:-3px;
+          background:#fff;
+          height: 12px;
+          width:12px;
+          top:-50%;
+          right:0px;
+          transform: translate(50%,0);
           cursor:pointer;
           z-index:1;
         }
-        .cycle{
-          position:absolute;
-          border-radius: 50%;
-          display: block;
-          background:var(--theme,#946ce6);
-          opacity:0.3;
-          height: 15px;
-          width:15px;
-          right:-8px;
-          top:-6px;
-          cursor:pointer;
-          z-index:1;
+          @keyframes hidden {
+            to {
+                
+                transition: .3s ease-out;
+                bottom:-34px;
+            }
         }
         @keyframes loading{
           0%{
@@ -395,22 +364,16 @@ class Eplayer extends HTMLElement {
           top: 50%;
           left: 50%;
           margin:-20px 0 0 -20px;
-          width: 40px;
-          height: 40px;
+          width: 30px;
+          height: 30px;
           z-index:1;
-          box-shadow: 2px 0px rgba(255,255,255,.6);
+          border-top: 4px solid rgba(255, 255, 255, 0.2);
+          border-right: 4px solid rgba(255, 255, 255, 0.2);
+          border-bottom: 4px solid rgba(255, 255, 255, 0.2);
+          border-left: 4px solid #fff;
           border-radius: 50%;
           animation: loading 1s linear infinite;
         }
-        .ep-video {
-          position: absolute;
-          bottom: 25px;
-          right: 20px;
-          font-size:40px;
-          color:var(--icons,rgba(255,255,255,.6));
-          z-index:1;
-          cursor: pointer; 
-        }
         .panel {
           position: absolute;
           bottom: 200px;
@@ -430,64 +393,65 @@ class Eplayer extends HTMLElement {
           border-radius:4px;
           background:rgba(0,0,0,.8)
         }
-        .speed{
-            font-size:10px;
-            font-style:italic;
-            width:22px;
-            text-align:center;
-            border-radius:11px;
-            color:rgba(0,0,0,.5);
-            font-weight:900;
-            background:var(--icons,rgba(255,255,255,.8));
-            margin-left:-10px;
-            display:inline-block;
-        }
 
         .danmaku {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      overflow: hidden;
-      z-index: 999;
-      height:100%;
-      width:100%;
-    }
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          pointer-events: none;
+          overflow: hidden;
+          z-index: 999;
+          height:100%;
+          width:100%;
+        }
+
+        iconpark-icon{
+        margin-right:5px;
+        cursor:pointer;
+        }
+
+        em{
+          font-size: 16px;
+          font-weight:bold;
+          font-style:normal;
+          color:#fff;
+          margin:0 10px 0 8px;
+          cursor: pointer;
+        }
+        
       </style>
       
       <div class="eplayer">
       <div class="danmaku"></div>
         <video id="video" class="video" src="${this.src || ''}"></video>
         <div class="mark loading"></div>
-        <div class="controls" style="bottom:-70px">
+        <div class="controls">
           <div class="progress">
             <b class="bg"></b>
             <b class="buffer"></b>
             <div class="current" style="width:0">
               <div class="dot"></div>
-              <div class="cycle"></div>
             </div>
           </div>
           <div class="options">
             <div class="left">
-              <i class="epicon ep-play is-play"></i>
+              <iconpark-icon icon-id="play" size="2rem" class="is-play"></iconpark-icon>
               <span class="time">
-                <b class="now">00:00</b> / <b class="total">00:00</b>
+                <b class="now">00:00</b>/<b class="total">00:00</b>
               </span>
             </div>
             <div class="right">
-              <i class="epicon ep-volume is-volume"></i>
-              <i class="epicon ep-speed">              
-                <b class="speed">1x</b>
-              </i>
-              ${document.pictureInPictureEnabled && `<i class="epicon ep-pip"></i>`}
-              <i class="epicon ep-full"></i>
+              <em class="speed">倍速</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>
+              <iconpark-icon icon-id="fullscreen" size="2rem" class="fullscreen"></iconpark-icon>
             </div>
           </div>
         </div>
-        <div class="epicon ep-video"></div>
+        <iconpark-icon icon-id="play"></iconpark-icon>
         <div class="panel"></div>
       </div>
     `
@@ -508,19 +472,14 @@ class Eplayer extends HTMLElement {
       '.current',
       '.buffer',
       '.is-play',
-      '.ep-video',
       '.is-volume',
-      '.cycle',
+      '.dot',
       '.progress',
       '.controls',
       '.line',
-      '.ep-pause',
-      '.ep-play',
-      '.ep-volume-off',
-      '.ep-volume',
       '.bg',
       '.eplayer',
-      '.ep-full',
+      '.fullscreen',
       '.panel',
       '.speed',
       '.pip',
@@ -556,17 +515,16 @@ class Eplayer extends HTMLElement {
     this.video.onended = this.ended.bind(this)
     this.delegate('click', {
       '.is-volume': this.volume,
-      '.ep-full': this.full,
-      '.ep-video': this.play,
+      '.fullscreen': this.full,
       '.is-play': this.play,
       '.ep-speed': this.speed,
       '.speed': this.speed,
       '.bg': this.progress,
       '.buffer': this.progress,
-      '.ep-pip': this.pip,
+      '.pip': this.pip,
     })
     this.delegate('pointerdown', {
-      '.cycle': this.down,
+      '.dot': this.down,
       '.mark': this.panel,
     })
     this.delegate('dblclick', {
@@ -576,7 +534,7 @@ class Eplayer extends HTMLElement {
       },
     })
     this.delegate('keydown', this.keydown)
-    this.delegate('pointerdown', this.alow)
+    this.delegate('mouseleave', this.alow)
     this.$('.eplayer').oncontextmenu = () => false
   }
 
@@ -622,9 +580,8 @@ function isFullScreen() {
 }
 
 ; (function () {
-  let link = document.createElement('link')
-  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_g9fk6jqpl8l.css')
-  link.setAttribute('rel', 'stylesheet')
+  let link = document.createElement('script')
+  link.setAttribute('src', 'https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_34101_11.6161dfd06f46009a9dea0fcffc6234bf.js')
   document.head.appendChild(link)
 })()
 

package/docs/icons/danmu-ok.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29 6.29a2 2 0 012-2h10.693a2 2 0 012 2v5.404a5.55 5.55 0 00-2.472-.55V8.274a.6.6 0 00-.6-.6h-.771l.321-.478a.6.6 0 10-.996-.67l-.771 1.148h-.317l-.772-1.148a.6.6 0 00-.996.67l.322.478h-.775a.6.6 0 00-.6.6v3.772a.6.6 0 00.6.6h1.609a5.602 5.602 0 00-.625.69h-1.463a.6.6 0 100 1.2h.763a5.554 5.554 0 00-.443 2.181c0 .76.152 1.484.428 2.144H6.289a2 2 0 01-2-2V6.29zm11.021 4.997a5.525 5.525 0 00-.552.158h-.626v-.684h1.178v.526zM6.277 7.332a.6.6 0 01.6-.6h2.378a.6.6 0 01.6.6v2.83a.6.6 0 01-.6.6H7.477v1.157h1.778a.6.6 0 01.6.6v3.3a.6.6 0 01-.6.6H6.877a.6.6 0 010-1.2h1.778v-2.1H6.877a.6.6 0 01-.6-.6V10.16a.6.6 0 01.6-.6h1.778V7.932H6.877a.6.6 0 01-.6-.6zm5.48 4.113v-.684h1.177v.684h-1.178zm0-1.884h1.177v-.688h-1.178v.688zm2.377 0h1.177v-.688h-1.178v.688z" fill="#fff"></path><path d="M20.425 16.713a3.857 3.857 0 11-7.714 0 3.857 3.857 0 017.714 0z" fill="#fff"></path><path d="M15.258 16.802l1.028 1.079L18 15.859" stroke="#FE2C55" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

package/docs/icons/danmu-op.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="vpn447p8" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.867 6.29a2 2 0 012-2H16.44a2 2 0 012 2v5.25l-1.644-.959a1 1 0 00-.801-.09V8.272a.6.6 0 00-.6-.6h-.76l.32-.48a.6.6 0 00-.999-.666l-.764 1.146h-.305l-.764-1.146a.6.6 0 00-.998.666l.32.48h-.765a.6.6 0 00-.6.6v3.772a.6.6 0 00.6.6h1.57l-.605.353a1 1 0 00-.346.337h-1.091a.6.6 0 100 1.2h.94v4.178c0 .05.005.1.012.147H5.867a2 2 0 01-2-2V6.29zm10.927 4.87l-.488.285h-.67v-.684h1.158v.4zM5.836 7.333a.6.6 0 01.6-.6h2.358a.6.6 0 01.6.6v2.83a.6.6 0 01-.6.6H7.036v1.157h1.758a.6.6 0 01.6.6v3.3a.6.6 0 01-.6.6H6.436a.6.6 0 010-1.2h1.758v-2.1H6.436a.6.6 0 01-.6-.6V10.16a.6.6 0 01.6-.6h1.758V7.932H6.436a.6.6 0 01-.6-.6zm5.443 4.113v-.684h1.157v.684h-1.157zm0-1.884h1.157v-.688h-1.157v.688zm2.357 0h1.158v-.688h-1.158v.688z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M16.778 12.703a1 1 0 00-.98 0l-2.429 1.366a1 1 0 00-.51.871v2.688a1 1 0 00.51.871l2.429 1.366a1 1 0 00.98 0l2.429-1.366a1 1 0 00.51-.871V14.94a1 1 0 00-.51-.871l-2.429-1.366zm-.49 2.299a1.286 1.286 0 100 2.571 1.286 1.286 0 000-2.571z" fill="#fff"></path></svg>

package/docs/icons/danmu-x.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29 6.29a2 2 0 012-2h10.693a2 2 0 012 2v5.404a5.55 5.55 0 00-2.472-.55V8.274a.6.6 0 00-.6-.6h-.771l.321-.478a.6.6 0 10-.996-.67l-.771 1.148h-.317l-.772-1.148a.6.6 0 00-.996.67l.322.478h-.775a.6.6 0 00-.6.6v3.772a.6.6 0 00.6.6h1.609a5.602 5.602 0 00-.625.69h-1.463a.6.6 0 100 1.2h.763a5.554 5.554 0 00-.443 2.181c0 .76.152 1.484.428 2.144H6.289a2 2 0 01-2-2V6.29zm11.021 4.997a5.525 5.525 0 00-.552.158h-.626v-.684h1.178v.526zM6.277 7.332a.6.6 0 01.6-.6h2.378a.6.6 0 01.6.6v2.83a.6.6 0 01-.6.6H7.477v1.157h1.778a.6.6 0 01.6.6v3.3a.6.6 0 01-.6.6H6.877a.6.6 0 010-1.2h1.778v-2.1H6.877a.6.6 0 01-.6-.6V10.16a.6.6 0 01.6-.6h1.778V7.932H6.877a.6.6 0 01-.6-.6zm5.48 4.113v-.684h1.177v.684h-1.178zm0-1.884h1.177v-.688h-1.178v.688zm2.377 0h1.177v-.688h-1.178v.688z" fill="#fff"></path><circle cx="16.566" cy="16.714" r="3.855" fill="#fff"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M17.613 18.824a2.355 2.355 0 01-3.157-3.157l3.157 3.157zm1.061-1.06l-3.158-3.158a2.355 2.355 0 013.158 3.158zm1.747-1.05a3.855 3.855 0 11-7.71 0 3.855 3.855 0 017.71 0z" fill="#FE2C55"></path></svg>

package/docs/icons/emoj.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" focusable="false" class="Ykki_0Um"><path d="M10 10C10 11.1046 9.32843 12 8.5 12C7.67157 12 7 11.1046 7 10C7 8.89543 7.67157 8 8.5 8C9.32843 8 10 8.89543 10 10Z" fill="currentColor"></path><path d="M15.5 12C16.3284 12 17 11.1046 17 10C17 8.89543 16.3284 8 15.5 8C14.6716 8 14 8.89543 14 10C14 11.1046 14.6716 12 15.5 12Z" fill="currentColor"></path><path d="M12 16.5303C10.3432 16.5303 9.00004 15.5709 9.00004 14.3874C9.00004 13.2039 15 13.2039 15 14.3874C15 15.5709 13.6569 16.5303 12 16.5303Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="currentColor"></path></svg>

package/docs/icons/fullscreen.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-get-fullscreen" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 8a2 2 0 00-2 2v12a2 2 0 002 2h13a2 2 0 002-2V10a2 2 0 00-2-2h-13zm10 11h-1.501v2H20.5a1 1 0 001-1v-2.5h-2V19zm-7 0v-1.5h-2V20a1 1 0 001 1h2.499v-2H12.5zm0-6h1.499v-2H11.5a1 1 0 00-1 1v2.5h2V13zm7 0h-1.501v-2H20.5a1 1 0 011 1v2.5h-2V13z" fill="#fff"></path></svg>

package/docs/icons/later.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.97 8.73C7.882 8.73 7 9.72 7 10.94v10.58c0 1.22.882 2.21 1.97 2.21h8.254A5.5 5.5 0 0123 15.59v-4.65c0-1.22-.882-2.21-1.97-2.21H8.97zm4.723 10.464l3.822-2.451a1.025 1.025 0 000-1.743l-3.822-2.451c-.724-.464-1.693.035-1.693.871v4.902c0 .837.97 1.336 1.693.872z" fill="#fff" fill-opacity="0.9"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22 25a4 4 0 100-8 4 4 0 000 8zm.4-6a.9.9 0 10-1.8 0v2.5a.9.9 0 00.9.9H24a.9.9 0 100-1.8h-1.6V19z" fill="#fff" fill-opacity="0.9"></path></svg>

package/docs/icons/pause.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-icon-pause" viewBox="0 0 32 32"><rect x="9" y="8" width="5" height="16" rx="1" fill="#fff"></rect><rect x="18" y="8" width="5" height="16" rx="1" fill="#fff"></rect></svg>

package/docs/icons/play.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-icon-play" viewBox="0 0 32 32"><path d="M23.5 15.134a1 1 0 010 1.732l-11.25 6.495a1 1 0 01-1.5-.866V9.505a1 1 0 011.5-.866l11.25 6.495z" fill="#fff"></path></svg>

package/docs/icons/volume-ok.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-volume" viewBox="0 0 32 32"><path d="M7 14a2 2 0 012-2h1l4.36-3.633a1 1 0 011.64.768v13.73a1 1 0 01-1.64.768L10 20H9a2 2 0 01-2-2v-4zM18 19a3 3 0 100-6v6z" fill="#fff"></path><path d="M18 23.734a7.75 7.75 0 000-15.468v2.507a5.25 5.25 0 010 10.453v2.508z" fill="#fff"></path></svg>

package/docs/icons/volume-x.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-volume-mute" viewBox="0 0 32 32"><path d="M7 14a2 2 0 012-2h1l4.36-3.633a1 1 0 011.64.768v13.73a1 1 0 01-1.64.768L10 20H9a2 2 0 01-2-2v-4z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M21.002 17.55l2.499 2.954 1.502-1.316-2.693-3.185 2.694-3.185-1.503-1.316-2.499 2.955-2.5-2.955L17 12.818l2.694 3.185-2.693 3.185 1.502 1.316 2.499-2.955z" fill="#fff"></path></svg>

package/docs/icons/web-fullscreen.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 8.5a2 2 0 00-2 2v11a2 2 0 002 2h12.5a2 2 0 002-2v-11a2 2 0 00-2-2H9.75zM15 11.25h-3.75a1 1 0 00-1 1V16h2v-2.75H15v-2zm5.75 9.5H17v-2h2.75V16h2v3.75a1 1 0 01-1 1z" fill="#fff"></path></svg>

package/docs/index.html

@@ -13,7 +13,7 @@
 <body>
   <style>
     body {
-      background: url(https://catbox.moe/bgs/texture3.png);
+      background: url(https://fontawesome.com/images/icons-gray-bg.svg);
     }
 
     .wrapper {
@@ -23,6 +23,8 @@
       left: 50%;
       top: 50%;
       height: 450px;
+      border-radius: 8px;
+      overflow: hidden;
     }
 
     @media screen and (max-width: 500px) {
@@ -58,14 +60,9 @@
   </style>
 
   <div class="wrapper">
-    <div class="container"></div>
     <e-player id="ep"
       src="https://a1.alibabausercontent.com/prod/feupload/user/edos8/2f0e7af0-29f1-11ef-b3cd-818e64ac843d.mp4">
     </e-player>
-
-    <a href="https://github.com/132yse/eplayer">github</a>
-    <a href="https://github.com/132yse/eplayer/blob/master/README.md">README</a>
-    <a href="https://www.clicli.cc">clicli.cc</a>
   </div>
   <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
   <script src="https://unpkg.com/hls.js"></script>
@@ -92,10 +89,6 @@
 
     function init(danmaku) {
       for (let i = 0; i < 100; i++) {
-        // danmaku.add({
-        //   msg: messages[parseInt(Math.random() * messages.length)],
-        //   fontSize: Math.floor(Math.random() * 20) + 20
-        // })
         document.querySelector('e-player').setAttribute('danma', messages[parseInt(Math.random() * messages.length)])
       }
     }

package/package.json

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