eplayer 1.5.11 → 1.5.13

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,7 @@ 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)
     this.stream()
     this.startMug()
     this.video.load()
@@ -92,11 +94,11 @@ class Eplayer extends HTMLElement {
   volume() {
     if (this.video.muted) {
       this.video.muted = false
-      setVolume(this.video.volume * 10, this.$('.line'))
+
       this.$('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
     } else {
       this.video.muted = true
-      setVolume(0, this.$('.line'))
+
       this.$('.is-volume').classList.replace('ep-volume', 'ep-volume-off')
     }
   }
@@ -119,10 +121,10 @@ class Eplayer extends HTMLElement {
 
   down(e) {
     this.disX = e.clientX - this.$('.cycle').offsetLeft
-    document.onmousemove = (e) => this.move(e)
-    document.onmouseup = () => {
-      document.onmousemove = null
-      document.onmouseup = null
+    document.onpointermove = (e) => this.move(e)
+    document.onpointerup = () => {
+      document.onpointermove = null
+      document.onpointerup = null
     }
   }
 
@@ -134,8 +136,8 @@ class Eplayer extends HTMLElement {
     }
     this.$('.current').style.width = offset + 'px'
     this.video.currentTime = (offset / this.$('.progress').clientWidth) * this.video.duration
-    document.onmousemove = null
-    setTimeout((document.onmousemove = (e) => e && this.move(e)), 30)
+    document.onpointermove = null
+    setTimeout((document.onpointermove = (e) => e && this.move(e)), 30)
   }
 
   alow() {
@@ -162,13 +164,11 @@ class Eplayer extends HTMLElement {
         try {
           this.video.volume = parseInt(this.video.volume * 100) / 100 + 0.05
         } catch (e) { }
-        setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
         break
       case 40:
         try {
           this.video.volume = parseInt(this.video.volume * 100) / 100 - 0.05
         } catch (e) { }
-        setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
         break
       case 32:
         this.play()
@@ -192,10 +192,13 @@ class Eplayer extends HTMLElement {
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen()
       }
+      
+      screen.orientation.lock("portrait-primary")
     } else {
       let el = this.$('.eplayer')
       let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
-      return rfs.call(el)
+      rfs.call(el)
+      screen.orientation.lock("landscape-primary")
     }
   }
 
@@ -234,7 +237,7 @@ class Eplayer extends HTMLElement {
     // console.log(this.beatmap)
     let html = `
       <style>
-        @import "https://at.alicdn.com/t/font_836948_g9fk6jqpl8l.css";
+        @import "https://at.alicdn.com/t/c/font_836948_ro9xopmggai.css";
         *{
           padding:0;
           margin:0;
@@ -266,6 +269,7 @@ class Eplayer extends HTMLElement {
           z-index:1;   
         }
         .progress{
+          display:${this.live?'none':'block'};
           position:relative;
           bottom:15px;
           left:0;
@@ -289,6 +293,7 @@ class Eplayer extends HTMLElement {
           color:#fff;
         }
         .time{
+        display:${this.live?'none':'inline-block'};
           position:relative;
           top:-2px;
         }
@@ -479,18 +484,6 @@ class Eplayer extends HTMLElement {
             </div>
             <div class="right">
               <i class="epicon ep-volume is-volume"></i>
-              <ol class="lines">
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-                <span class="line"><i></i></span>
-              </ol>
               <i class="epicon ep-speed">              
                 <b class="speed">1x</b>
               </i>
@@ -578,7 +571,7 @@ class Eplayer extends HTMLElement {
     this.video = this.$('.video')
     this.mug = this.$('.mug')
     this.video.volume = 0.5
-    setVolume(this.video.volume * 10, this.$('.line'))
+    // setVolume(this.video.volume * 10, this.$('.line'))
     this.video.onwaiting = this.waiting.bind(this)
     this.video.oncanplay = this.canplay.bind(this)
     this.video.ontimeupdate = this.update.bind(this)
@@ -594,7 +587,7 @@ class Eplayer extends HTMLElement {
       '.buffer': this.progress,
       '.ep-pip': this.pip,
     })
-    this.delegate('mousedown', {
+    this.delegate('pointerdown', {
       '.cycle': this.down,
       '.mark': this.panel,
     })
@@ -605,13 +598,7 @@ class Eplayer extends HTMLElement {
       },
     })
     this.delegate('keydown', this.keydown)
-    this.delegate('mousemove', this.alow)
-    this.$('.line').forEach((item, index) => {
-      item.onclick = () => {
-        this.video.volume = (index + 1) / 10
-        setVolume(index + 1, this.$('.line'))
-      }
-    })
+    this.delegate('pointerdown', this.alow)
     this.$('.eplayer').oncontextmenu = () => false
   }
 }
@@ -632,15 +619,6 @@ function getTimeStr(time) {
   return h === '00' ? m + ':' + s : h + ':' + m + ':' + s
 }
 
-function setVolume(index, node) {
-  for (let j = index; j < node.length; j++) {
-    node[j].classList.remove('active')
-  }
-  for (let i = 0; i < index; i++) {
-    node[i].classList.add('active')
-  }
-}
-
 function isFullScreen() {
   return document.isFullScreen || document.webkitIsFullScreen || document.mozIsFullScreen
 }

package/docs/index.html

@@ -27,8 +27,7 @@
     @media screen and (max-width: 500px) {
       .wrapper {
         width: 100%;
-        margin: 100px auto;
-        max-height: 200px;
+        transform: translate(-50%, 0)!important;
       }
     }
 
@@ -109,7 +108,9 @@
   </script>
   <div class="wrapper">
 
-    <e-player id="ep" src="https://mp4.ziyuan.wang/view.php/67c796ed2dad70c429bda73a647704f0.mp4">
+    <e-player id="ep" 
+    src="https://a1.alibabausercontent.com/prod/feupload/user/edos8/2f0e7af0-29f1-11ef-b3cd-818e64ac843d.mp4" 
+    live="false">
     </e-player>
 
     <a href="https://github.com/132yse/eplayer">github</a>

package/package.json

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