eplayer 1.5.1 → 1.5.3

package/docs/eplayer.js

@@ -138,13 +138,13 @@ class Eplayer extends HTMLElement {
       case 38:
         try {
           this.video.volume = parseInt(this.video.volume * 100) / 100 + 0.05
-        } catch (e) {}
+        } 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) {}
+        } catch (e) { }
         setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
         break
       case 32:
@@ -210,7 +210,7 @@ class Eplayer extends HTMLElement {
   init() {
     let html = `
       <style>
-        @import "https://at.alicdn.com/t/font_836948_uhdb83b0e3m.css";
+        @import "https://at.alicdn.com/t/font_836948_g9fk6jqpl8l.css";
         *{
           padding:0;
           margin:0;
@@ -272,10 +272,11 @@ class Eplayer extends HTMLElement {
         }
         .lines{
           padding:0 10px;
+          display:flex;
+          align-items: center;
         }
         .line{
-          padding:0;
-          margin-bottom: -2px;
+          padding:0 2px;
           cursor:pointer
         }
         .line i{
@@ -450,6 +451,7 @@ class Eplayer extends HTMLElement {
               <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>
             </div>
           </div>
@@ -489,6 +491,7 @@ class Eplayer extends HTMLElement {
       '.ep-full',
       '.panel',
       '.speed',
+      '.pip',
     ]
 
     for (const key of doms) {
@@ -518,6 +521,14 @@ class Eplayer extends HTMLElement {
     }
   }
 
+  pip(e) {
+    if (!document.pictureInPictureElement) {
+      this.video.requestPictureInPicture()
+    } else {
+      document.exitPictureInPicture()
+    }
+  }
+
   mount() {
     this.video = this.$('.video')
     this.video.volume = 0.5
@@ -535,6 +546,7 @@ class Eplayer extends HTMLElement {
       '.speed': this.speed,
       '.bg': this.progress,
       '.buffer': this.progress,
+      '.ep-pip': this.pip,
     })
     this.delegate('mousedown', {
       '.cycle': this.down,
@@ -554,7 +566,7 @@ class Eplayer extends HTMLElement {
         setVolume(index + 1, this.$('.line'))
       }
     })
-    document.oncontextmenu = () => false
+    this.$('.eplayer').oncontextmenu = () => false
   }
 }
 
@@ -587,9 +599,9 @@ function isFullScreen() {
   return document.isFullScreen || document.webkitIsFullScreen || document.mozIsFullScreen
 }
 
-;(function () {
+; (function () {
   let link = document.createElement('link')
-  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_uhdb83b0e3m.css')
+  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_g9fk6jqpl8l.css')
   link.setAttribute('rel', 'stylesheet')
   document.head.appendChild(link)
 })()

package/docs/index.html

@@ -98,7 +98,7 @@
   </style>
   <div class="wrapper">
     <e-player id="ep"
-      src="https://gss3.baidu.com/6LZ0ej3k1Qd3ote6lo7D0j9wehsv/tieba-smallvideo/3_d97abb65fc36a1d689efd3a105bebce1.mp4">
+      src="https://bos.nj.bpc.baidu.com/tieba-movideo/347573243_f2740215c9863213a9f272b81aab1b90_8b216f814f25.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>
@@ -110,4 +110,4 @@
   <script src="./pic.js"></script>
 </body>
 
-</html>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eplayer",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "description": "A web-components html5 video player facing future",
   "main": "./packages/eplayer/index.js",
   "module": "./packages/eplayer/index.js",

package/packages/eplayer/index.js

@@ -159,18 +159,11 @@ export default class Eplayer extends HTMLElement {
   }
 
   full() {
+    let el = this.$('.eplayer')
     if (isFullScreen()) {
-      if (document.exitFullscreen) {
-        document.exitFullscreen()
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen()
-      } else if (document.webkitCancelFullScreen) {
-        document.webkitCancelFullScreen()
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen()
-      }
+      const efs = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen
+      return efs()
     } else {
-      let el = this.$('.eplayer')
       let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
       return rfs.call(el)
     }
@@ -210,7 +203,7 @@ export default class Eplayer extends HTMLElement {
   init() {
     let html = `
       <style>
-        @import "https://at.alicdn.com/t/font_836948_uhdb83b0e3m.css";
+        @import "https://at.alicdn.com/t/font_836948_g9fk6jqpl8l.css";
         *{
           padding:0;
           margin:0;
@@ -272,15 +265,15 @@ export default class Eplayer extends HTMLElement {
         }
         .lines{
           padding:0 10px;
+          display:flex;
+          align-items: center;
         }
         .line{
-          padding:0;
-          margin-bottom: -2px;
+          padding:0 0.1rem;
           cursor:pointer
         }
         .line i{
           width:4px;
-          border-radius:4px;
           display: inline-block;
           background: var(--icons,rgba(255,255,255,0.6));
           height: 12px;
@@ -450,6 +443,7 @@ export default class Eplayer extends HTMLElement {
               <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>
             </div>
           </div>
@@ -489,6 +483,7 @@ export default class Eplayer extends HTMLElement {
       '.ep-full',
       '.panel',
       '.speed',
+      '.pip',
     ]
 
     for (const key of doms) {
@@ -518,6 +513,14 @@ export default class Eplayer extends HTMLElement {
     }
   }
 
+  pip(e) {
+    if (!document.pictureInPictureElement) {
+      this.video.requestPictureInPicture()
+    } else {
+      document.exitPictureInPicture()
+    }
+  }
+
   mount() {
     this.video = this.$('.video')
     this.video.volume = 0.5
@@ -535,6 +538,7 @@ export default class Eplayer extends HTMLElement {
       '.speed': this.speed,
       '.bg': this.progress,
       '.buffer': this.progress,
+      '.ep-pip': this.pip,
     })
     this.delegate('mousedown', {
       '.cycle': this.down,
@@ -554,7 +558,7 @@ export default class Eplayer extends HTMLElement {
         setVolume(index + 1, this.$('.line'))
       }
     })
-    document.oncontextmenu = () => false
+    this.$('.eplayer').oncontextmenu = () => false
   }
 }
 
@@ -589,7 +593,7 @@ function isFullScreen() {
 
 ;(function () {
   let link = document.createElement('link')
-  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_uhdb83b0e3m.css')
+  link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_g9fk6jqpl8l.css')
   link.setAttribute('rel', 'stylesheet')
   document.head.appendChild(link)
-})()
+})()