mirrors/DPlayer
1
0
Fork 0
mirror of https://github.com/DIYgod/DPlayer synced 2024-11-23 04:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix show danmaku bug

Browse Source
This commit is contained in:
DIYgod 2016-07-27 23:52:04 +08:00
parent 95d113843f
commit 572db88656
No known key found for this signature in database
GPG Key ID: F8797DD1088C6506
5 changed files with 59 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.html
View File

@ -49,7 +49,7 @@
<div class="container">
<h1>DPlayer</h1>
<h2>Wow, such a lovely HTML5 danmaku video player</h2>
<p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/DPlayer" target="_blank">GitHub</a>. Licensed MIT.</p>
<p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/DPlayer" target="_blank">GitHub</a>. Licensed SATA.</p>
<hr>
<div class="dplayer"></div>
</div>

4
dist/DPlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

47
src/DPlayer.js
View File

@ -579,14 +579,14 @@ class DPlayer {
<div class="dplayer-setting-item dplayer-setting-loop">
<span class="dplayer-label">${this.getTran('Loop')}</span>
<div class="dplayer-toggle">
<input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle" id="dplayer-toggle">
<input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle">
<label for="dplayer-toggle"></label>
</div>
</div>
<div class="dplayer-setting-item dplayer-setting-showdan">
<span class="dplayer-label">${this.getTran('Danmaku')}</span>
<div class="dplayer-toggle">
<input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan" id="dplayer-toggle">
<input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">
<label for="dplayer-toggle-dan"></label>
</div>
</div>
@ -660,6 +660,7 @@ class DPlayer {
loopToggle.checked = this.loop;
loopEle.addEventListener('click', () => {
console.log('loop1');
loopToggle.checked = !loopToggle.checked;
if (loopToggle.checked) {
this.loop = true;
@ -671,17 +672,6 @@ class DPlayer {
}
closeSetting();
});
loopToggle.addEventListener('change', () => {
if (loopToggle.checked) {
this.loop = true;
this.audio.loop = this.loop;
}
else {
this.loop = false;
this.audio.loop = this.loop;
}
closeSetting();
});
// show danmaku control
const showDanEle = this.element.getElementsByClassName('dplayer-setting-showdan')[0];
@ -697,36 +687,7 @@ class DPlayer {
for (let i = 0; i < this.dan.length; i++) {
if (this.dan[i].time >= this.audio.currentTime) {
this.danIndex = i;
return;
}
this.danIndex = this.dan.length;
}
this.danmakuTime = setInterval(() => {
let item = this.dan[this.danIndex];
while (item && this.audio.currentTime >= parseFloat(item.time)) {
this.danmakuIn(item.text, item.color, item.type);
item = this.dan[++this.danIndex];
}
}, 0);
}
}
else {
this.showdan = false;
if (this.option.danmaku) {
clearInterval(this.danmakuTime);
danContainer.innerHTML = '';
}
}
closeSetting();
});
showDanToggle.addEventListener('change', () => {
if (showDanToggle.checked) {
this.showdan = true;
if (this.option.danmaku) {
for (let i = 0; i < this.dan.length; i++) {
if (this.dan[i].time >= this.audio.currentTime) {
this.danIndex = i;
return;
break;
}
this.danIndex = this.dan.length;
}

102
src/DPlayer.scss
View File

@ -791,63 +791,63 @@
font-size: 0;
vertical-align: middle;
float: right;
}
input#dplayer-toggle {
max-height: 0;
max-width: 0;
display: none;
}
input#dplayer-toggle + label {
display: inline-block;
position: relative;
box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
border: 1px solid rgb(223, 223, 223);
height: 20px;
width: 32px;
border-radius: 10px;
box-sizing: border-box;
cursor: pointer;
transition: .2s ease-in-out;
}
input {
max-height: 0;
max-width: 0;
display: none;
}
input + label {
display: inline-block;
position: relative;
box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
border: 1px solid rgb(223, 223, 223);
height: 20px;
width: 32px;
border-radius: 10px;
box-sizing: border-box;
cursor: pointer;
transition: .2s ease-in-out;
}
input#dplayer-toggle + label:before {
content: "";
position: absolute;
display: block;
height: 18px;
width: 18px;
top: 0;
left: 0;
border-radius: 15px;
transition: .2s ease-in-out;
}
input + label:before {
content: "";
position: absolute;
display: block;
height: 18px;
width: 18px;
top: 0;
left: 0;
border-radius: 15px;
transition: .2s ease-in-out;
}
input#dplayer-toggle + label:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
border-radius: 15px;
background: #fff;
transition: .2s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
height: 18px;
width: 18px;
}
input + label:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
border-radius: 15px;
background: #fff;
transition: .2s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
height: 18px;
width: 18px;
}
input#dplayer-toggle:checked + label {
border-color: rgba(255, 255, 255, 0.5);
}
input:checked + label {
border-color: rgba(255, 255, 255, 0.5);
}
input#dplayer-toggle:checked + label:before {
width: 30px;
background: rgba(255, 255, 255, 0.5);
}
input:checked + label:before {
width: 30px;
background: rgba(255, 255, 255, 0.5);
}
input#dplayer-toggle:checked + label:after {
left: 12px;
input:checked + label:after {
left: 12px;
}
}
}
}