eplayer - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

docs/eplayer.js

@@ -123,4 +123,6 @@ class Eplayer extends HTMLElement {
     this.$(".dot").style.left = offset + "px"
+    console.log(this.video.duration)
     this.video.currentTime =
       (offset / this.$(".progress").clientWidth) * this.video.duration
+      console.log(this.video.currentTime)
     document.onmousemove = null
@@ -127,0 +129,0 @@ setTimeout(document.onmousemove = e => {

package.json

 {
   "name": "eplayer",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "A web-components html5 video player facing future",
-  "main": "./dist/eplayer.js",
+  "main": "./dist/eplayer.em.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c"
   },
@@ -9,0 +10,0 @@ "repository": {

packages/eplayer.js

@@ -5,3 +5,3 @@ class Eplayer extends HTMLElement {
     this.src = this.getAttribute('src')
-    this.type = this.getAttribute('type')
+    this.type = this.src.includes('m3u8') ? 'mp4' : null
     this.init()
@@ -12,11 +12,7 @@ this.stream()
   static get observedAttributes() {
-    return ['src', 'type']
+    return ['src']
   }
 
   attributeChangedCallback(name, _, newVal) {
-    if (name === 'src') this.src = this.$('.source').src = newVal
-    if (name === 'type') {
-      this.$('.source').type = `video/${newVal}`
-      this.type = newVal
-    }
+    if (name === 'src') this.src = this.$('.video').src = newVal
     this.stream()
@@ -40,9 +36,2 @@ this.video.load()
         break
-      case 'flv':
-        if (flvjs.isSupported()) {
-          let flvPlayer = flvjs.createPlayer({ type: 'flv', url: this.src })
-          flvPlayer.attachMediaElement(this.video)
-          flvPlayer.load()
-        }
-        break
     }
@@ -79,3 +68,3 @@ }
       this.video.muted = false
-      setVolume(this.video.volume * 10 + 1, this.$('.line'))
+      setVolume(this.video.volume * 10, this.$('.line'))
       this.$('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
@@ -102,3 +91,2 @@ } else {
     this.$('.current').style.width = offset + 'px'
-    this.$('.dot').style.left = offset + 'px'
   }
@@ -113,3 +101,3 @@
   down(e) {
-    this.disX = e.clientX - this.$('.dot').offsetLeft
+    this.disX = e.clientX - this.$('.cycle').offsetLeft
     document.onmousemove = e => this.move(e)
@@ -123,3 +111,3 @@ document.onmouseup = () => {
   move(e) {
-    let offset = e.clientX - this.disX
+    let offset = e.clientX - this.disX + 7
     if (offset < 0) offset = 0
@@ -129,3 +117,2 @@ if (offset > this.$('.progress').clientWidth)
     this.$('.current').style.width = offset + 'px'
-    this.$('.dot').style.left = offset + 'px'
     this.video.currentTime =
@@ -145,11 +132,19 @@ (offset / this.$('.progress').clientWidth) * this.video.duration
     this.$('.controls').style.bottom = 0
-    this.$('.dot').style.bottom = 39 + 'px'
     this.$('.ep-video').style.bottom = 70 + 'px'
     this.timer = setTimeout(() => {
-      this.$('.controls').style.bottom = -42 + 'px'
-      this.$('.dot').style.bottom = -42 + 'px'
-      this.$('.ep-video').style.bottom = 25 + 'px'
+      this.$(".controls").style.bottom = -42 + "px"
+      this.$(".ep-video").style.bottom = 25 + "px"
     }, 5000)
   }
 
+  keyup(e) {
+    if (e && e.keyCode == 37) this.video.currentTime -= 10
+    if (e && e.keyCode == 39) this.video.currentTime += 10
+    if (e && e.keyCode == 38) this.video.volume += 0.05
+    if (e && e.keyCode == 40) this.video.volume -= 0.05
+    if (e && e.keyCode == 32) this.play()
+    let index = Math.floor(this.video.volume * 10)
+    setVolume(index, this.$('.line'))
+  }
+
   ended() {
@@ -214,3 +209,2 @@ this.$('.is-play').classList.replace('ep-pause', 'ep-play')
           background:linear-gradient(transparent,rgba(0,0,0,.5));
-          cursor: pointer; 
           transition: .3s ease-out;   
@@ -236,2 +230,3 @@ z-index:1;
           transition: .3s;
+          cursor:pointer;
         }
@@ -279,4 +274,3 @@ .epicon:hover{
           left:0;
-          height:4px;
-          transform:scaleY(0.7);
+          height:3px;
           position:absolute;
@@ -297,13 +291,25 @@ top:0;
           position:absolute;
-          left:0;
-          bottom:39px;
           border-radius: 50%;
           display: block;
           background:var(--theme,#00a1d6);
-          padding: 4px;
+          height: 9px;
+          width:9px;
+          right:-5px;
+          top:-3px;
           cursor:pointer;
-          transform:translateX(6px);
           z-index:1;
-          transition: .1s ease-out;
         }
+        .cycle{
+          position:absolute;
+          border-radius: 50%;
+          display: block;
+          background:var(--theme,#00a1d6);
+          opacity:0.3;
+          height: 15px;
+          width:15px;
+          right:-8px;
+          top:-6px;
+          cursor:pointer;
+          z-index:1;
+        }
         @keyframes loading{
@@ -350,7 +356,3 @@ 0%{
       <div class="eplayer">
-        <video id="video">
-          <source src="${this.src}" type="video/${
-      this.type ? this.type : 'mp4'
-    }" class="source">
-        </video>
+        <video id="video" class="video" src="${this.src}"></video>
         <div class="mark loading"></div>
@@ -361,3 +363,6 @@ <div class="controls" style="bottom:-45px">
             <b class="buffer"></b>
-            <b class="current" style="width:0"></b>
+            <div class="current" style="width:0">
+              <div class="dot"></div>
+              <div class="cycle"></div>
+            </div>
           </div>
@@ -387,3 +392,2 @@ <div class="options">
         </div>
-        <i class="dot" style="bottom:-45px"></i>
         <div class="epicon ep-video"></div>
@@ -401,2 +405,3 @@ </div>
   dom() {
+    window.onkeyup = e => this.keyup(e)
     this.video = this.$('video')
@@ -412,3 +417,2 @@ this.video.volume = 0.5
     })
-    this.$('.dot').onmousedown = e => this.down(e)
     this.$('.progress').onclick = e => this.progress(e)
@@ -418,4 +422,5 @@ this.video.onwaiting = () => this.waiting()
     this.video.ontimeupdate = () => this.update()
+    this.$('.cycle').onmousedown = e => this.down(e)
 
-    this.$('.eplayer').onmousemove = () => this.alow()
+    this.$(".eplayer").onmousemove = () => this.alow()
     this.$('.ep-full').onclick = () => this.full()
@@ -422,0 +427,0 @@ this.$('.ep-video').onclick = this.$('.is-play').onclick = () => this.play()

README.md

@@ -15,9 +15,11 @@ <p align="center"><img src="http://ww1.sinaimg.cn/large/0065Zy9egy1fvcjfzaa1lj30dw0dwwhe.jpg" alt="eplayer logo" width="200px"></p>
 
-1. 导入进来 js 文件，可以从 lib 目录获取
+1. 导入进来 js 文件，可以从 dist 目录获取
 
 目前 web-components 原生支持度是在太差，尤其是国内各种奇葩浏览器（搜狗、QQ 等），需要引入 polyfill
 
+值得一提，dist 目录下，`.b` 后缀为浏览器文件，作为 cdn 使用
+
 ```html
 <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.1/webcomponents-bundle.js"></script>
-<script src="./eplayer.js"></script>
+<script src="./eplayer.b.js"></script>
 ```
@@ -50,3 +52,3 @@
 
-原生支持 `mp4` 和 `mkv` ,如果需要支持 `m3u8` 和 `flv`，需要先引入 `hls.js` 和 `flv.js`
+原生支持 `mp4` 和 `mkv` ,如果需要支持 `m3u8` 和 `flv`，需要先引入 `hls.js`
 
@@ -57,11 +59,5 @@ 这两个文件太大，建议手动 gzip
 <script src="./hlv.min.js"></script>
-<script src="./flv.min.js"></script>
 ```
+已经放弃 `flv` 的支持，太古老的格式，兼容性极差
 
-然后，type 属性 对应 `hls` 或 `flv`
-
-```html
-<e-player src="./001.m3u8" type="hls"></e-player>
-```
-
 ## Npm
@@ -73,3 +69,3 @@
 
-注意，发布到 npm 的模块，只对外暴露了一个 Eplayer 类，需要自行 define customElements，并且是全局注册，只能一次
+注意，发布到 npm 的模块，只对外暴露了一个 Eplayer 类，需要自行 define customElements，并且是全局注册，只能注册一次
 
@@ -113,4 +109,4 @@ ```Javascript
 ```Javascript
-function Eplayer() {
-  return <e-player src={this.state.src} type={this.state.type}></e-player>
+function Eplayer(props) {
+  return <e-player src={props.src} type={props.type}></e-player>
 }
@@ -120,3 +116,4 @@ ```
 #### ssr
-通常 ssr 需要 exl
+ssr 服务端没有 web-components 的 API，通常 web-components 的 ssr 都会通过一些库去模拟这些 API
+eplayer 不推荐这么做，请直接和正常的 html 引入方式一样，引入 cdn
 
@@ -123,0 +120,0 @@ #### 移动端

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

65807

increased by19.7%

Lines of code

1910

increased by29.14%

Worsened metrics

Number of lines in readme file

123

decreased by-2.38%

No dependency changes