eplayer 1.6.2 → 1.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/docs/eplayer.js CHANGED
@@ -19,12 +19,12 @@ class Eplayer extends HTMLElement {
19
19
  if (name === 'src') {
20
20
  this.src = this.$('.video').src = newVal
21
21
  this.stream()
22
- this.video.load()
22
+ this.$('.video').load()
23
23
  }
24
24
  if (name === 'type') {
25
25
  this.type = newVal
26
26
  this.stream()
27
- this.video.load()
27
+ this.$('.video').load()
28
28
  }
29
29
  if (name === 'live') {
30
30
  this.live = JSON.parse(newVal)
@@ -81,25 +81,21 @@ class Eplayer extends HTMLElement {
81
81
  if (this.video.paused) {
82
82
  this.video.play()
83
83
  this.danmaku.resume()
84
- this.$('.ep-video').style.display = 'none'
85
- this.$('.is-play').classList.replace('ep-play', 'ep-pause')
84
+ this.$('.is-play').setAttribute('icon-id', 'pause')
86
85
  } else {
87
86
  this.video.pause()
88
87
  this.danmaku.pause()
89
- this.$('.ep-video').style.display = 'block'
90
- this.$('.is-play').classList.replace('ep-pause', 'ep-play')
88
+ this.$('.is-play').setAttribute('icon-id', 'play')
91
89
  }
92
90
  }
93
91
 
94
92
  volume() {
95
93
  if (this.video.muted) {
96
94
  this.video.muted = false
97
-
98
- this.$('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
95
+ this.$('.is-volume').setAttribute('icon-id', 'volume-ok')
99
96
  } else {
100
97
  this.video.muted = true
101
-
102
- this.$('.is-volume').classList.replace('ep-volume', 'ep-volume-off')
98
+ this.$('.is-volume').setAttribute('icon-id', 'volume-x')
103
99
  }
104
100
  }
105
101
 
@@ -141,15 +137,8 @@ class Eplayer extends HTMLElement {
141
137
  }
142
138
 
143
139
  alow() {
144
- clearTimeout(this.timer)
145
- this.$('.controls').style.bottom = 0
146
- this.$('.ep-video').style.bottom = 70 + 'px'
140
+ // this.$('.controls').style.bottom = 0
147
141
  this.$('.mark').style.cursor = 'default'
148
- this.timer = setTimeout(() => {
149
- this.$('.controls').style.bottom = -70 + 'px'
150
- this.$('.ep-video').style.bottom = 25 + 'px'
151
- this.$('.mark').style.cursor = 'none'
152
- }, 5000)
153
142
  }
154
143
 
155
144
  keydown(e) {
@@ -178,7 +167,7 @@ class Eplayer extends HTMLElement {
178
167
  }
179
168
 
180
169
  ended() {
181
- this.$('.is-play').classList.replace('ep-pause', 'ep-play')
170
+ // this.$('.is-play').classList.replace('ep-pause', 'ep-play')
182
171
  }
183
172
 
184
173
  full() {
@@ -245,6 +234,7 @@ class Eplayer extends HTMLElement {
245
234
  list-style:none;
246
235
  }
247
236
  .eplayer,video{
237
+ font-family:'黑体';
248
238
  height:100%;
249
239
  width:100%;
250
240
  color:var(--icons,rgba(255,255,255,0.6));
@@ -261,70 +251,42 @@ class Eplayer extends HTMLElement {
261
251
  left:0;
262
252
  right:0;
263
253
  bottom:0;
264
- padding:10px;
265
254
  background:linear-gradient(transparent,rgba(0,0,0,.5));
266
- transition: .3s ease-out;
255
+ transition: .3s ease-out;
256
+ bottom:-34px;
267
257
  z-index:1;
268
258
  }
259
+ .eplayer:hover .controls{
260
+ bottom:0;
261
+ }
269
262
  .progress{
270
263
  display:${this.live ? 'none' : 'block'};
271
264
  position:relative;
272
- bottom:15px;
265
+ bottom:5px;
273
266
  left:0;
274
267
  right:0;
275
268
  cursor:pointer;
269
+ transition: .3s ease-out;
270
+ }
271
+ .progress:hover .bg,.progress:hover .current,.progress:hover .buffer{
272
+ height:6px;
273
+ }
274
+ .progress:hover .dot,.progress:hover .cycle{
275
+ display:block;
276
276
  }
277
277
  .options{
278
278
  display:flex;
279
279
  align-items:center;
280
280
  }
281
- .epicon{
282
- color:var(--icons,rgba(255,255,255,0.6));
283
- padding:0 10px;
284
- }
285
- .epicon{
286
- font-size:18px;
287
- transition: .3s;
288
- cursor:pointer;
289
- }
290
- .epicon:hover{
291
- color:#fff;
292
- }
293
281
  .time{
294
- display:${this.live ? 'none' : 'inline-block'};
282
+ display:${this.live ? 'none' : 'inline-block'};
295
283
  position:relative;
296
- top:-2px;
297
- }
298
- .time b{
299
- font-weight:normal;
300
- }
301
- .lines{
302
- padding:0 10px;
303
- display:flex;
304
- align-items: center;
305
- }
306
- .line{
307
- padding:0 2px;
308
- cursor:pointer
309
- }
310
- .line i{
311
- width:4px;
312
- border-radius:4px;
313
- display: inline-block;
314
- background: var(--icons,rgba(255,255,255,0.6));
315
- height: 12px;
316
- transform:scaleX(0.7);
317
- transition: .3s;
318
- }
319
- .line:hover i{
320
- height:14px;
321
- background:var(--theme,#946ce6);
322
- }
323
- .active i{
324
- background:var(--theme,#946ce6);
284
+ font-size:15px;
325
285
  }
326
286
  .left{
327
287
  flex:1;
288
+ display:flex;
289
+ align-items:center;
328
290
  }
329
291
  .right{
330
292
  flex:1;
@@ -337,6 +299,7 @@ class Eplayer extends HTMLElement {
337
299
  height:3px;
338
300
  position:absolute;
339
301
  top:0;
302
+ transition: .3s ease-out;
340
303
  }
341
304
  .bg{
342
305
  right:0;
@@ -349,27 +312,15 @@ class Eplayer extends HTMLElement {
349
312
  background:var(--buffer,rgba(255,255,255,.5));
350
313
  }
351
314
  .dot{
315
+ display:none;
352
316
  position:absolute;
353
317
  border-radius: 50%;
354
- display: block;
355
- background:var(--theme,#946ce6);
356
- height: 9px;
357
- width:9px;
358
- right:-5px;
359
- top:-3px;
360
- cursor:pointer;
361
- z-index:1;
362
- }
363
- .cycle{
364
- position:absolute;
365
- border-radius: 50%;
366
- display: block;
367
- background:var(--theme,#946ce6);
368
- opacity:0.3;
369
- height: 15px;
370
- width:15px;
371
- right:-8px;
372
- top:-6px;
318
+ background:#fff;
319
+ height: 12px;
320
+ width:12px;
321
+ top:-50%;
322
+ right:0px;
323
+ transform: translate(50%,0);
373
324
  cursor:pointer;
374
325
  z-index:1;
375
326
  }
@@ -395,22 +346,16 @@ class Eplayer extends HTMLElement {
395
346
  top: 50%;
396
347
  left: 50%;
397
348
  margin:-20px 0 0 -20px;
398
- width: 40px;
399
- height: 40px;
349
+ width: 30px;
350
+ height: 30px;
400
351
  z-index:1;
401
- box-shadow: 2px 0px rgba(255,255,255,.6);
352
+ border-top: 4px solid rgba(255, 255, 255, 0.2);
353
+ border-right: 4px solid rgba(255, 255, 255, 0.2);
354
+ border-bottom: 4px solid rgba(255, 255, 255, 0.2);
355
+ border-left: 4px solid #fff;
402
356
  border-radius: 50%;
403
357
  animation: loading 1s linear infinite;
404
358
  }
405
- .ep-video {
406
- position: absolute;
407
- bottom: 25px;
408
- right: 20px;
409
- font-size:40px;
410
- color:var(--icons,rgba(255,255,255,.6));
411
- z-index:1;
412
- cursor: pointer;
413
- }
414
359
  .panel {
415
360
  position: absolute;
416
361
  bottom: 200px;
@@ -430,64 +375,65 @@ class Eplayer extends HTMLElement {
430
375
  border-radius:4px;
431
376
  background:rgba(0,0,0,.8)
432
377
  }
433
- .speed{
434
- font-size:10px;
435
- font-style:italic;
436
- width:22px;
437
- text-align:center;
438
- border-radius:11px;
439
- color:rgba(0,0,0,.5);
440
- font-weight:900;
441
- background:var(--icons,rgba(255,255,255,.8));
442
- margin-left:-10px;
443
- display:inline-block;
444
- }
445
378
 
446
379
  .danmaku {
447
- position: absolute;
448
- top: 0;
449
- left: 0;
450
- right: 0;
451
- bottom: 0;
452
- pointer-events: none;
453
- overflow: hidden;
454
- z-index: 999;
455
- height:100%;
456
- width:100%;
457
- }
380
+ position: absolute;
381
+ top: 0;
382
+ left: 0;
383
+ right: 0;
384
+ bottom: 0;
385
+ pointer-events: none;
386
+ overflow: hidden;
387
+ z-index: 999;
388
+ height:100%;
389
+ width:100%;
390
+ }
391
+
392
+ iconpark-icon{
393
+ margin-right:5px;
394
+ cursor:pointer;
395
+ }
396
+
397
+ em{
398
+ font-size: 16px;
399
+ font-weight:bold;
400
+ font-style:normal;
401
+ color:#fff;
402
+ margin:0 10px 0 8px;
403
+ cursor: pointer;
404
+ }
405
+
458
406
  </style>
459
407
 
460
408
  <div class="eplayer">
461
409
  <div class="danmaku"></div>
462
410
  <video id="video" class="video" src="${this.src || ''}"></video>
463
411
  <div class="mark loading"></div>
464
- <div class="controls" style="bottom:-70px">
412
+ <div class="controls">
465
413
  <div class="progress">
466
414
  <b class="bg"></b>
467
415
  <b class="buffer"></b>
468
416
  <div class="current" style="width:0">
469
417
  <div class="dot"></div>
470
- <div class="cycle"></div>
471
418
  </div>
472
419
  </div>
473
420
  <div class="options">
474
421
  <div class="left">
475
- <i class="epicon ep-play is-play"></i>
422
+ <iconpark-icon icon-id="play" size="2rem" class="is-play"></iconpark-icon>
476
423
  <span class="time">
477
- <b class="now">00:00</b> / <b class="total">00:00</b>
424
+ <b class="now">00:00</b>/<b class="total">00:00</b>
478
425
  </span>
479
426
  </div>
480
427
  <div class="right">
481
- <i class="epicon ep-volume is-volume"></i>
482
- <i class="epicon ep-speed">
483
- <b class="speed">1x</b>
484
- </i>
485
- ${document.pictureInPictureEnabled && `<i class="epicon ep-pip"></i>`}
486
- <i class="epicon ep-full"></i>
428
+ <em class="speed">倍速</em>
429
+ <em class="pip">画中画</em>
430
+ <iconpark-icon icon-id="volume-ok" size="2rem" class="is-volume"></iconpark-icon>
431
+ <iconpark-icon icon-id="web-fullscreen" size="2rem"></iconpark-icon>
432
+ <iconpark-icon icon-id="fullscreen" size="2rem" class="fullscreen"></iconpark-icon>
487
433
  </div>
488
434
  </div>
489
435
  </div>
490
- <div class="epicon ep-video"></div>
436
+ <iconpark-icon icon-id="play"></iconpark-icon>
491
437
  <div class="panel"></div>
492
438
  </div>
493
439
  `
@@ -508,19 +454,14 @@ class Eplayer extends HTMLElement {
508
454
  '.current',
509
455
  '.buffer',
510
456
  '.is-play',
511
- '.ep-video',
512
457
  '.is-volume',
513
458
  '.cycle',
514
459
  '.progress',
515
460
  '.controls',
516
461
  '.line',
517
- '.ep-pause',
518
- '.ep-play',
519
- '.ep-volume-off',
520
- '.ep-volume',
521
462
  '.bg',
522
463
  '.eplayer',
523
- '.ep-full',
464
+ '.fullscreen',
524
465
  '.panel',
525
466
  '.speed',
526
467
  '.pip',
@@ -556,14 +497,13 @@ class Eplayer extends HTMLElement {
556
497
  this.video.onended = this.ended.bind(this)
557
498
  this.delegate('click', {
558
499
  '.is-volume': this.volume,
559
- '.ep-full': this.full,
560
- '.ep-video': this.play,
500
+ '.fullscreen': this.full,
561
501
  '.is-play': this.play,
562
502
  '.ep-speed': this.speed,
563
503
  '.speed': this.speed,
564
504
  '.bg': this.progress,
565
505
  '.buffer': this.progress,
566
- '.ep-pip': this.pip,
506
+ '.pip': this.pip,
567
507
  })
568
508
  this.delegate('pointerdown', {
569
509
  '.cycle': this.down,
@@ -622,9 +562,8 @@ function isFullScreen() {
622
562
  }
623
563
 
624
564
  ; (function () {
625
- let link = document.createElement('link')
626
- link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_g9fk6jqpl8l.css')
627
- link.setAttribute('rel', 'stylesheet')
565
+ let link = document.createElement('script')
566
+ link.setAttribute('src', 'https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_34101_11.6161dfd06f46009a9dea0fcffc6234bf.js')
628
567
  document.head.appendChild(link)
629
568
  })()
630
569
 
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29 6.29a2 2 0 012-2h10.693a2 2 0 012 2v5.404a5.55 5.55 0 00-2.472-.55V8.274a.6.6 0 00-.6-.6h-.771l.321-.478a.6.6 0 10-.996-.67l-.771 1.148h-.317l-.772-1.148a.6.6 0 00-.996.67l.322.478h-.775a.6.6 0 00-.6.6v3.772a.6.6 0 00.6.6h1.609a5.602 5.602 0 00-.625.69h-1.463a.6.6 0 100 1.2h.763a5.554 5.554 0 00-.443 2.181c0 .76.152 1.484.428 2.144H6.289a2 2 0 01-2-2V6.29zm11.021 4.997a5.525 5.525 0 00-.552.158h-.626v-.684h1.178v.526zM6.277 7.332a.6.6 0 01.6-.6h2.378a.6.6 0 01.6.6v2.83a.6.6 0 01-.6.6H7.477v1.157h1.778a.6.6 0 01.6.6v3.3a.6.6 0 01-.6.6H6.877a.6.6 0 010-1.2h1.778v-2.1H6.877a.6.6 0 01-.6-.6V10.16a.6.6 0 01.6-.6h1.778V7.932H6.877a.6.6 0 01-.6-.6zm5.48 4.113v-.684h1.177v.684h-1.178zm0-1.884h1.177v-.688h-1.178v.688zm2.377 0h1.177v-.688h-1.178v.688z" fill="#fff"></path><path d="M20.425 16.713a3.857 3.857 0 11-7.714 0 3.857 3.857 0 017.714 0z" fill="#fff"></path><path d="M15.258 16.802l1.028 1.079L18 15.859" stroke="#FE2C55" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="vpn447p8" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.867 6.29a2 2 0 012-2H16.44a2 2 0 012 2v5.25l-1.644-.959a1 1 0 00-.801-.09V8.272a.6.6 0 00-.6-.6h-.76l.32-.48a.6.6 0 00-.999-.666l-.764 1.146h-.305l-.764-1.146a.6.6 0 00-.998.666l.32.48h-.765a.6.6 0 00-.6.6v3.772a.6.6 0 00.6.6h1.57l-.605.353a1 1 0 00-.346.337h-1.091a.6.6 0 100 1.2h.94v4.178c0 .05.005.1.012.147H5.867a2 2 0 01-2-2V6.29zm10.927 4.87l-.488.285h-.67v-.684h1.158v.4zM5.836 7.333a.6.6 0 01.6-.6h2.358a.6.6 0 01.6.6v2.83a.6.6 0 01-.6.6H7.036v1.157h1.758a.6.6 0 01.6.6v3.3a.6.6 0 01-.6.6H6.436a.6.6 0 010-1.2h1.758v-2.1H6.436a.6.6 0 01-.6-.6V10.16a.6.6 0 01.6-.6h1.758V7.932H6.436a.6.6 0 01-.6-.6zm5.443 4.113v-.684h1.157v.684h-1.157zm0-1.884h1.157v-.688h-1.157v.688zm2.357 0h1.158v-.688h-1.158v.688z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M16.778 12.703a1 1 0 00-.98 0l-2.429 1.366a1 1 0 00-.51.871v2.688a1 1 0 00.51.871l2.429 1.366a1 1 0 00.98 0l2.429-1.366a1 1 0 00.51-.871V14.94a1 1 0 00-.51-.871l-2.429-1.366zm-.49 2.299a1.286 1.286 0 100 2.571 1.286 1.286 0 000-2.571z" fill="#fff"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29 6.29a2 2 0 012-2h10.693a2 2 0 012 2v5.404a5.55 5.55 0 00-2.472-.55V8.274a.6.6 0 00-.6-.6h-.771l.321-.478a.6.6 0 10-.996-.67l-.771 1.148h-.317l-.772-1.148a.6.6 0 00-.996.67l.322.478h-.775a.6.6 0 00-.6.6v3.772a.6.6 0 00.6.6h1.609a5.602 5.602 0 00-.625.69h-1.463a.6.6 0 100 1.2h.763a5.554 5.554 0 00-.443 2.181c0 .76.152 1.484.428 2.144H6.289a2 2 0 01-2-2V6.29zm11.021 4.997a5.525 5.525 0 00-.552.158h-.626v-.684h1.178v.526zM6.277 7.332a.6.6 0 01.6-.6h2.378a.6.6 0 01.6.6v2.83a.6.6 0 01-.6.6H7.477v1.157h1.778a.6.6 0 01.6.6v3.3a.6.6 0 01-.6.6H6.877a.6.6 0 010-1.2h1.778v-2.1H6.877a.6.6 0 01-.6-.6V10.16a.6.6 0 01.6-.6h1.778V7.932H6.877a.6.6 0 01-.6-.6zm5.48 4.113v-.684h1.177v.684h-1.178zm0-1.884h1.177v-.688h-1.178v.688zm2.377 0h1.177v-.688h-1.178v.688z" fill="#fff"></path><circle cx="16.566" cy="16.714" r="3.855" fill="#fff"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M17.613 18.824a2.355 2.355 0 01-3.157-3.157l3.157 3.157zm1.061-1.06l-3.158-3.158a2.355 2.355 0 013.158 3.158zm1.747-1.05a3.855 3.855 0 11-7.71 0 3.855 3.855 0 017.71 0z" fill="#FE2C55"></path></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" focusable="false" class="Ykki_0Um"><path d="M10 10C10 11.1046 9.32843 12 8.5 12C7.67157 12 7 11.1046 7 10C7 8.89543 7.67157 8 8.5 8C9.32843 8 10 8.89543 10 10Z" fill="currentColor"></path><path d="M15.5 12C16.3284 12 17 11.1046 17 10C17 8.89543 16.3284 8 15.5 8C14.6716 8 14 8.89543 14 10C14 11.1046 14.6716 12 15.5 12Z" fill="currentColor"></path><path d="M12 16.5303C10.3432 16.5303 9.00004 15.5709 9.00004 14.3874C9.00004 13.2039 15 13.2039 15 14.3874C15 15.5709 13.6569 16.5303 12 16.5303Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="currentColor"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-get-fullscreen" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 8a2 2 0 00-2 2v12a2 2 0 002 2h13a2 2 0 002-2V10a2 2 0 00-2-2h-13zm10 11h-1.501v2H20.5a1 1 0 001-1v-2.5h-2V19zm-7 0v-1.5h-2V20a1 1 0 001 1h2.499v-2H12.5zm0-6h1.499v-2H11.5a1 1 0 00-1 1v2.5h2V13zm7 0h-1.501v-2H20.5a1 1 0 011 1v2.5h-2V13z" fill="#fff"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.97 8.73C7.882 8.73 7 9.72 7 10.94v10.58c0 1.22.882 2.21 1.97 2.21h8.254A5.5 5.5 0 0123 15.59v-4.65c0-1.22-.882-2.21-1.97-2.21H8.97zm4.723 10.464l3.822-2.451a1.025 1.025 0 000-1.743l-3.822-2.451c-.724-.464-1.693.035-1.693.871v4.902c0 .837.97 1.336 1.693.872z" fill="#fff" fill-opacity="0.9"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22 25a4 4 0 100-8 4 4 0 000 8zm.4-6a.9.9 0 10-1.8 0v2.5a.9.9 0 00.9.9H24a.9.9 0 100-1.8h-1.6V19z" fill="#fff" fill-opacity="0.9"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-icon-pause" viewBox="0 0 32 32"><rect x="9" y="8" width="5" height="16" rx="1" fill="#fff"></rect><rect x="18" y="8" width="5" height="16" rx="1" fill="#fff"></rect></svg>
@@ -0,0 +1 @@
1
+ <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-icon-play" viewBox="0 0 32 32"><path d="M23.5 15.134a1 1 0 010 1.732l-11.25 6.495a1 1 0 01-1.5-.866V9.505a1 1 0 011.5-.866l11.25 6.495z" fill="#fff"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-volume" viewBox="0 0 32 32"><path d="M7 14a2 2 0 012-2h1l4.36-3.633a1 1 0 011.64.768v13.73a1 1 0 01-1.64.768L10 20H9a2 2 0 01-2-2v-4zM18 19a3 3 0 100-6v6z" fill="#fff"></path><path d="M18 23.734a7.75 7.75 0 000-15.468v2.507a5.25 5.25 0 010 10.453v2.508z" fill="#fff"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="xg-volume-mute" viewBox="0 0 32 32"><path d="M7 14a2 2 0 012-2h1l4.36-3.633a1 1 0 011.64.768v13.73a1 1 0 01-1.64.768L10 20H9a2 2 0 01-2-2v-4z" fill="#fff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M21.002 17.55l2.499 2.954 1.502-1.316-2.693-3.185 2.694-3.185-1.503-1.316-2.499 2.955-2.5-2.955L17 12.818l2.694 3.185-2.693 3.185 1.502 1.316 2.499-2.955z" fill="#fff"></path></svg>
@@ -0,0 +1 @@
1
+ <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 8.5a2 2 0 00-2 2v11a2 2 0 002 2h12.5a2 2 0 002-2v-11a2 2 0 00-2-2H9.75zM15 11.25h-3.75a1 1 0 00-1 1V16h2v-2.75H15v-2zm5.75 9.5H17v-2h2.75V16h2v3.75a1 1 0 01-1 1z" fill="#fff"></path></svg>
package/docs/index.html CHANGED
@@ -13,7 +13,7 @@
13
13
  <body>
14
14
  <style>
15
15
  body {
16
- background: url(https://catbox.moe/bgs/texture3.png);
16
+ background: url(https://fontawesome.com/images/icons-gray-bg.svg);
17
17
  }
18
18
 
19
19
  .wrapper {
@@ -23,6 +23,8 @@
23
23
  left: 50%;
24
24
  top: 50%;
25
25
  height: 450px;
26
+ border-radius: 8px;
27
+ overflow: hidden;
26
28
  }
27
29
 
28
30
  @media screen and (max-width: 500px) {
@@ -58,14 +60,9 @@
58
60
  </style>
59
61
 
60
62
  <div class="wrapper">
61
- <div class="container"></div>
62
63
  <e-player id="ep"
63
64
  src="https://a1.alibabausercontent.com/prod/feupload/user/edos8/2f0e7af0-29f1-11ef-b3cd-818e64ac843d.mp4">
64
65
  </e-player>
65
-
66
- <a href="https://github.com/132yse/eplayer">github</a>
67
- <a href="https://github.com/132yse/eplayer/blob/master/README.md">README</a>
68
- <a href="https://www.clicli.cc">clicli.cc</a>
69
66
  </div>
70
67
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
71
68
  <script src="https://unpkg.com/hls.js"></script>
@@ -92,10 +89,6 @@
92
89
 
93
90
  function init(danmaku) {
94
91
  for (let i = 0; i < 100; i++) {
95
- // danmaku.add({
96
- // msg: messages[parseInt(Math.random() * messages.length)],
97
- // fontSize: Math.floor(Math.random() * 20) + 20
98
- // })
99
92
  document.querySelector('e-player').setAttribute('danma', messages[parseInt(Math.random() * messages.length)])
100
93
  }
101
94
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eplayer",
3
- "version": "1.6.2",
3
+ "version": "1.6.3",
4
4
  "description": "A web-components html5 video player facing future",
5
5
  "main": "./docs/eplayer.js",
6
6
  "module": "./docs/eplayer.js",
Binary file
Binary file
Binary file
Binary file
package/docs/res/bad.png DELETED
Binary file
Binary file
Binary file
package/docs/res/bjt1.png DELETED
Binary file
package/docs/res/bjt2.png DELETED
Binary file
package/docs/res/bjt3.png DELETED
Binary file
package/docs/res/bjt4.png DELETED
Binary file
Binary file
package/docs/res/good.png DELETED
Binary file
Binary file
Binary file
Binary file
package/docs/res/kong.png DELETED
Binary file
package/docs/res/lan3.png DELETED
Binary file
package/docs/res/lv3.png DELETED
Binary file
package/docs/res/miss.png DELETED
Binary file
Binary file
Binary file