eplayer 1.5.12 → 1.5.14

package/docs/eplayer.js

@@ -6,13 +6,14 @@ class Eplayer extends HTMLElement {
     this.type = this.getAttribute('type')
     this.beatmap = this.getAttribute('beatmap')
     this.height = this.getAttribute('height')
+    this.live = JSON.parse(this.getAttribute('live'))
 
     this.init()
     this.stream()
   }
 
   static get observedAttributes() {
-    return ['src', 'type', 'beatmap', 'height']
+    return ['src', 'type', 'beatmap', 'height', 'live']
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -20,6 +21,14 @@ class Eplayer extends HTMLElement {
     if (name === 'type') this.type = newVal
     if (name === 'beatmap') this.beatmap = newVal
     if (name === 'height') this.height = newVal
+    if (name === 'live') {
+      this.live = JSON.parse(newVal)
+      if (this.live) {
+        this.$('.progress').style.display = 'none'
+        this.$('.time').style.display = 'none'
+      }
+    }
+
     this.stream()
     this.startMug()
     this.video.load()
@@ -190,7 +199,7 @@ class Eplayer extends HTMLElement {
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen()
       }
-      
+
       screen.orientation.lock("portrait-primary")
     } else {
       let el = this.$('.eplayer')
@@ -267,6 +276,7 @@ class Eplayer extends HTMLElement {
           z-index:1;   
         }
         .progress{
+          display:${this.live ? 'none' : 'block'};
           position:relative;
           bottom:15px;
           left:0;
@@ -290,6 +300,7 @@ class Eplayer extends HTMLElement {
           color:#fff;
         }
         .time{
+        display:${this.live ? 'none' : 'inline-block'};
           position:relative;
           top:-2px;
         }
@@ -506,6 +517,7 @@ class Eplayer extends HTMLElement {
       '.loading',
       '.total',
       '.now',
+      '.time',
       '.current',
       '.buffer',
       '.is-play',

package/docs/index.html

@@ -108,7 +108,8 @@
   </script>
   <div class="wrapper">
 
-    <e-player id="ep" src="https://a1.alibabausercontent.com/prod/feupload/user/edos8/2f0e7af0-29f1-11ef-b3cd-818e64ac843d.mp4">
+    <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>
@@ -118,6 +119,11 @@
   <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
   <script src="https://unpkg.com/hls.js"></script>
   <script src="./eplayer.js"></script>
+  <script>
+    setTimeout(() => {
+      document.querySelector('e-player').setAttribute('live',true)
+    }, 1000);
+  </script>
   <!-- <script src="./pic.js"></script> -->
 </body>
 

package/package.json

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