eplayer - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

dist/eplayer.js

@@ -9,2 +9,13 @@ class Eplayer extends HTMLElement {
   }
+
+  static get observedAttributes() {
+    return ['src', 'type']
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'src') this.$('.source').src = newVal
+    if (name === 'type') this.$('.source').type = `video/${newVal}`
+    this.video.load()
+  }
+
   waiting() {
@@ -14,2 +25,3 @@ this.$('.mark').classList.remove('playing')
   }
+
   stream() {
@@ -26,3 +38,3 @@ switch (this.type) {
         if (flvjs.isSupported()) {
-          let flvPlayer = flvjs.createPlayer({ type: 'flv', url: this.src })
+          let flvPlayer = flvjs.createPlayer({type: 'flv', url: this.src})
           flvPlayer.attachMediaElement(this.video)
@@ -34,2 +46,3 @@ flvPlayer.load()
   }
+
   canplay() {
@@ -46,2 +59,3 @@ this.$('.mark').classList.remove('loading')
   }
+
   play() {
@@ -59,2 +73,3 @@ if (this.video.paused) {
   }
+
   volume() {
@@ -72,2 +87,3 @@ if (this.video.muted) {
   }
+
   update() {
@@ -87,2 +103,3 @@ let cTime = getTimeStr(this.video.currentTime)
   }
+
   progress(e) {
@@ -93,2 +110,3 @@ let offset = e.offsetX / this.$('.progress').offsetWidth
   }
+
   down(e) {
@@ -102,2 +120,3 @@ this.disX = e.clientX - this.$('.dot').offsetLeft
   }
+
   move(e) {
@@ -115,4 +134,5 @@ let offset = e.clientX - this.disX
       if (e) this.move(e)
-    },30)
+    }, 30)
   }
+
   alow() {
@@ -129,5 +149,7 @@ clearTimeout(this.timer)
   }
+
   ended() {
     this.$('.is-play').classList.replace('ep-pause', 'ep-play')
   }
+
   full() {
@@ -154,5 +176,6 @@ if (isFullScreen()) {
   }
+
   init() {
     let link = document.createElement('link')
-    link.setAttribute('href','https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
+    link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
     link.setAttribute('rel', 'stylesheet')
@@ -286,2 +309,3 @@ document.head.appendChild(link)
           position: absolute;
+          z-index: 1;
           top:0;
@@ -294,2 +318,3 @@ left:0;
           position: absolute;
+          z-index: 1;
           top: 50%;
@@ -313,2 +338,3 @@ left: 50%;
           cursor: pointer; 
+          z-index: 1;
         }
@@ -318,3 +344,3 @@ </style>
         <video id="video">
-          <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}">
+          <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}" class="source">
         </video>
@@ -384,3 +410,3 @@ <div class="mark loading"></div>
     this.video.onended = () => this.ended()
-    this.$('.mark').ondblclick = () => { 
+    this.$('.mark').ondblclick = () => {
       clearTimeout(this.timer)
@@ -407,3 +433,3 @@ this.full()
 
-export default Eplayer
+customElements.define('e-player', Eplayer)
 
@@ -410,0 +436,0 @@ function getTimeStr(time) {

docs/eplayer.js

@@ -9,2 +9,13 @@ class Eplayer extends HTMLElement {
   }
+
+  static get observedAttributes() {
+    return ['src', 'type']
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'src') this.$('.source').src = newVal
+    if (name === 'type') this.$('.source').type = `video/${newVal}`
+    this.video.load()
+  }
+
   waiting() {
@@ -14,2 +25,3 @@ this.$('.mark').classList.remove('playing')
   }
+
   stream() {
@@ -26,3 +38,3 @@ switch (this.type) {
         if (flvjs.isSupported()) {
-          let flvPlayer = flvjs.createPlayer({ type: 'flv', url: this.src })
+          let flvPlayer = flvjs.createPlayer({type: 'flv', url: this.src})
           flvPlayer.attachMediaElement(this.video)
@@ -34,2 +46,3 @@ flvPlayer.load()
   }
+
   canplay() {
@@ -46,2 +59,3 @@ this.$('.mark').classList.remove('loading')
   }
+
   play() {
@@ -59,2 +73,3 @@ if (this.video.paused) {
   }
+
   volume() {
@@ -72,2 +87,3 @@ if (this.video.muted) {
   }
+
   update() {
@@ -87,2 +103,3 @@ let cTime = getTimeStr(this.video.currentTime)
   }
+
   progress(e) {
@@ -93,2 +110,3 @@ let offset = e.offsetX / this.$('.progress').offsetWidth
   }
+
   down(e) {
@@ -102,2 +120,3 @@ this.disX = e.clientX - this.$('.dot').offsetLeft
   }
+
   move(e) {
@@ -115,4 +134,5 @@ let offset = e.clientX - this.disX
       if (e) this.move(e)
-    },30)
+    }, 30)
   }
+
   alow() {
@@ -129,5 +149,7 @@ clearTimeout(this.timer)
   }
+
   ended() {
     this.$('.is-play').classList.replace('ep-pause', 'ep-play')
   }
+
   full() {
@@ -154,5 +176,6 @@ if (isFullScreen()) {
   }
+
   init() {
     let link = document.createElement('link')
-    link.setAttribute('href','https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
+    link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
     link.setAttribute('rel', 'stylesheet')
@@ -286,2 +309,3 @@ document.head.appendChild(link)
           position: absolute;
+          z-index: 1;
           top:0;
@@ -294,2 +318,3 @@ left:0;
           position: absolute;
+          z-index: 1;
           top: 50%;
@@ -313,2 +338,3 @@ left: 50%;
           cursor: pointer; 
+          z-index: 1;
         }
@@ -318,3 +344,3 @@ </style>
         <video id="video">
-          <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}">
+          <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}" class="source">
         </video>
@@ -384,3 +410,3 @@ <div class="mark loading"></div>
     this.video.onended = () => this.ended()
-    this.$('.mark').ondblclick = () => { 
+    this.$('.mark').ondblclick = () => {
       clearTimeout(this.timer)
@@ -387,0 +413,0 @@ this.full()

package.json

 {
   "name": "eplayer",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A web-components html5 video player facing future",
@@ -5,0 +5,0 @@ "main": "./dist/eplayer.js",

README.md

@@ -65,2 +65,6 @@ <p align="center"><img src="http://ww1.sinaimg.cn/large/0065Zy9egy1fvcjfzaa1lj30dw0dwwhe.jpg" alt="eplayer logo" width="200px"></p>
 ```
+然后，同样需要引入上面的几个文件，然后 bind 一下 src 和 type
+```html
+<e-player :src="url" :type="type"></e-player>
+```
 可以封装成 vue 组件来使用：[vue-web-components-wrapper](https://github.com/vuejs/vue-web-component-wrapper)
@@ -76,3 +80,3 @@
 function Eplayer() {
-  return <e-player></e-player>
+  return <e-player src={this.state.src} type={this.state.type}></e-player>
 }
@@ -79,0 +83,0 @@ ```

src/eplayer.js

@@ -9,2 +9,13 @@ class Eplayer extends HTMLElement {
   }
+
+  static get observedAttributes() {
+    return ['src', 'type']
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'src') this.$('.source').src = newVal
+    if (name === 'type') this.$('.source').type = `video/${newVal}`
+    this.video.load()
+  }
+
   waiting() {
@@ -14,2 +25,3 @@ this.$('.mark').classList.remove('playing')
   }
+
   stream() {
@@ -26,3 +38,3 @@ switch (this.type) {
         if (flvjs.isSupported()) {
-          let flvPlayer = flvjs.createPlayer({ type: 'flv', url: this.src })
+          let flvPlayer = flvjs.createPlayer({type: 'flv', url: this.src})
           flvPlayer.attachMediaElement(this.video)
@@ -34,2 +46,3 @@ flvPlayer.load()
   }
+
   canplay() {
@@ -46,2 +59,3 @@ this.$('.mark').classList.remove('loading')
   }
+
   play() {
@@ -59,2 +73,3 @@ if (this.video.paused) {
   }
+
   volume() {
@@ -72,2 +87,3 @@ if (this.video.muted) {
   }
+
   update() {
@@ -87,2 +103,3 @@ let cTime = getTimeStr(this.video.currentTime)
   }
+
   progress(e) {
@@ -93,2 +110,3 @@ let offset = e.offsetX / this.$('.progress').offsetWidth
   }
+
   down(e) {
@@ -102,2 +120,3 @@ this.disX = e.clientX - this.$('.dot').offsetLeft
   }
+
   move(e) {
@@ -115,4 +134,5 @@ let offset = e.clientX - this.disX
       if (e) this.move(e)
-    },30)
+    }, 30)
   }
+
   alow() {
@@ -129,5 +149,7 @@ clearTimeout(this.timer)
   }
+
   ended() {
     this.$('.is-play').classList.replace('ep-pause', 'ep-play')
   }
+
   full() {
@@ -154,5 +176,6 @@ if (isFullScreen()) {
   }
+
   init() {
     let link = document.createElement('link')
-    link.setAttribute('href','https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
+    link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_6lbb2iu59.css')
     link.setAttribute('rel', 'stylesheet')
@@ -286,2 +309,3 @@ document.head.appendChild(link)
           position: absolute;
+          z-index: 1;
           top:0;
@@ -294,2 +318,3 @@ left:0;
           position: absolute;
+          z-index: 1;
           top: 50%;
@@ -313,2 +338,3 @@ left: 50%;
           cursor: pointer; 
+          z-index: 1;
         }
@@ -318,3 +344,3 @@ </style>
         <video id="video">
-          <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}">
+          <source src="${this.src}" type="video/${this.type ? this.type : 'mp4'}" class="source">
         </video>
@@ -384,3 +410,3 @@ <div class="mark loading"></div>
     this.video.onended = () => this.ended()
-    this.$('.mark').ondblclick = () => { 
+    this.$('.mark').ondblclick = () => {
       clearTimeout(this.timer)
@@ -387,0 +413,0 @@ this.full()

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54548

increased by2.58%

Lines of code

1453

increased by2.32%

Number of lines in readme file

91

increased by4.6%

No dependency changes