eplayer 1.5.10 → 1.5.12

package/docs/eplayer.js

@@ -92,11 +92,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 +119,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 +134,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 +162,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 +190,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 +235,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;
@@ -461,7 +462,7 @@ class Eplayer extends HTMLElement {
       <div class="eplayer">
         <video id="video" class="video" src="${this.src || ''}"></video>
         <div class="mark loading"></div>
-        <div class="controls" style="bottom:-50px">
+        <div class="controls" style="bottom:-70px">
           <div class="progress">
             <b class="bg"></b>
             <b class="buffer"></b>
@@ -479,18 +480,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 +567,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 +583,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 +594,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 +615,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,7 @@
   </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">
     </e-player>
 
     <a href="https://github.com/132yse/eplayer">github</a>

package/package.json

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