Comparing version 1.5.15 to 1.6.0
@@ -7,5 +7,4 @@ class Eplayer extends HTMLElement { | ||
this.type = this.getAttribute('type') | ||
this.beatmap = this.getAttribute('beatmap') | ||
this.height = this.getAttribute('height') | ||
this.live = JSON.parse(this.getAttribute('live')) | ||
this.danmaku = null | ||
@@ -17,10 +16,16 @@ this.init() | ||
static get observedAttributes() { | ||
return ['src', 'type', 'beatmap', 'height', 'live'] | ||
return ['src', 'type', 'danma', 'live'] | ||
} | ||
attributeChangedCallback(name, _, newVal) { | ||
if (name === 'src') this.src = this.$('.video').src = newVal | ||
if (name === 'type') this.type = newVal | ||
if (name === 'beatmap') this.beatmap = newVal | ||
if (name === 'height') this.height = newVal | ||
attributeChangedCallback(name, oldVal, newVal) { | ||
if (name === 'src') { | ||
this.src = this.$('.video').src = newVal | ||
this.stream() | ||
this.video.load() | ||
} | ||
if (name === 'type') { | ||
this.type = newVal | ||
this.stream() | ||
this.video.load() | ||
} | ||
if (name === 'live') { | ||
@@ -31,3 +36,3 @@ this.live = JSON.parse(newVal) | ||
this.$('.time').style.display = 'none' | ||
}else{ | ||
} else { | ||
this.$('.progress').style.display = 'block' | ||
@@ -37,6 +42,7 @@ this.$('.time').style.display = 'inline-block' | ||
} | ||
this.stream() | ||
this.startMug() | ||
this.video.load() | ||
if (name === 'danma') { | ||
this.danmaku.add({ | ||
msg: newVal | ||
}) | ||
} | ||
} | ||
@@ -54,18 +60,2 @@ | ||
startMug() { | ||
if (!this.beatmap) return | ||
this.$('.mug').innerHTML = '' // 先清空 | ||
this.$('.mug').style.display = 'block' | ||
this.$('.mug').style.height = this.height + 'px' | ||
this.$('.mug').style.width = (this.height / 8 * 5) + 'px' | ||
this.$('.ep-video').style.display = 'none' | ||
this.$('.controls').style.display = 'none' | ||
if (!this.beatmap) return | ||
const beats = this.beatmap.split('|').map(item => { | ||
const [fps, button] = item.split(':') | ||
return { fps, button } | ||
}) | ||
new Mug(beats, this.$('.mug'), this.video) | ||
} | ||
stream() { | ||
@@ -84,3 +74,2 @@ switch (this.type) { | ||
mark() { | ||
if (this.beatmap) return | ||
clearTimeout(this.timer) | ||
@@ -98,5 +87,5 @@ this.timer = setTimeout(() => this.play(), 200) | ||
play() { | ||
if (this.beatmap) return | ||
if (this.video.paused) { | ||
this.video.play() | ||
this.danmaku.resume() | ||
this.$('.ep-video').style.display = 'none' | ||
@@ -106,2 +95,3 @@ this.$('.is-play').classList.replace('ep-play', 'ep-pause') | ||
this.video.pause() | ||
this.danmaku.play() | ||
this.$('.ep-video').style.display = 'block' | ||
@@ -255,3 +245,2 @@ this.$('.is-play').classList.replace('ep-pause', 'ep-play') | ||
init() { | ||
// console.log(this.beatmap) | ||
let html = ` | ||
@@ -280,3 +269,2 @@ <style> | ||
.controls{ | ||
display:${this.beatmap ? 'none' : 'block'}; | ||
position:absolute; | ||
@@ -429,3 +417,2 @@ left:0; | ||
position: absolute; | ||
display:${this.beatmap ? 'none' : 'block'}; | ||
bottom: 25px; | ||
@@ -469,20 +456,20 @@ right: 20px; | ||
} | ||
.mug { | ||
height: ${this.height}px; | ||
width: ${this.height / 8 * 5}px; | ||
position: absolute; | ||
z-index: 999; | ||
/* pointer-events: none; */ | ||
transform: translate(-50%, -50%); | ||
left: 50%; | ||
top: 50%; | ||
opacity: 0.95; | ||
display: ${this.beatmap ? 'block' : 'none'} | ||
} | ||
.wrap{ | ||
position: relative; | ||
} | ||
.danmaku { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
right: 0; | ||
bottom: 0; | ||
pointer-events: none; | ||
overflow: hidden; | ||
z-index: 999; | ||
} | ||
</style> | ||
<div class="wrap"> | ||
<div class="mug"></div> | ||
<div class="danmaku"></div> | ||
<div class="eplayer"> | ||
@@ -555,3 +542,3 @@ <video id="video" class="video" src="${this.src || ''}"></video> | ||
'.pip', | ||
'.mug' | ||
'.danmaku' | ||
] | ||
@@ -596,4 +583,6 @@ | ||
this.video = this.$('.video') | ||
this.mug = this.$('.mug') | ||
this.video.volume = 0.5 | ||
this.danmaku = new Danmaku({ | ||
container: this.$('.danmaku') | ||
}) | ||
// setVolume(this.video.volume * 10, this.$('.line')) | ||
@@ -600,0 +589,0 @@ this.video.onwaiting = this.waiting.bind(this) |
{ | ||
"name": "eplayer", | ||
"version": "1.5.15", | ||
"version": "1.6.0", | ||
"description": "A web-components html5 video player facing future", | ||
@@ -5,0 +5,0 @@ "main": "./docs/eplayer.js", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
110373
30
1149