mirror of
https://github.com/DIYgod/DPlayer
synced 2024-11-22 18:56:54 +00:00
danmaku display algorithms; setting box; comment button
This commit is contained in:
DIYgod
parent
0eb803efbd
commit
9220e7b1b6
@ -1,53 +1,53 @@
|
||||
{
|
||||
"danmaku": [
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "2.8",
|
||||
"text": "此生无悔入",
|
||||
"color": "#f00",
|
||||
"type": "right"
|
||||
},
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "1.6",
|
||||
"text": "此生无悔入四月来世愿做友人A",
|
||||
"color": "#ff0",
|
||||
"type": "right"
|
||||
},
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "0.4",
|
||||
"text": "比♂利比♂利爱1",
|
||||
"text": "此生无悔入四月来世",
|
||||
"color": "#f00",
|
||||
"type": "right"
|
||||
},
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "0.8",
|
||||
"text": "比♂利比♂利比♂利爱1.2",
|
||||
"text": "此生无悔入四月来世愿做友人A此生无悔入四月来世愿做",
|
||||
"color": "#0f0",
|
||||
"type": "right"
|
||||
},
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "1.2",
|
||||
"text": "比♂利比♂利爱1.4比♂利比♂利爱1.4比♂利比♂利爱1.4比♂利比♂利爱1.4比♂利比♂利爱1.4比♂利比♂利爱1.4",
|
||||
"text": "此生无悔入四月来世愿做友人",
|
||||
"color": "#00f",
|
||||
"type": "right"
|
||||
},
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "1.6",
|
||||
"text": "比♂利比♂利爱1.6",
|
||||
"color": "#ff0",
|
||||
"type": "right"
|
||||
},
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "2.0",
|
||||
"text": "比♂利比♂利比♂利爱1.8",
|
||||
"text": "此生无悔入四月来世愿做友人A",
|
||||
"color": "#f0f",
|
||||
"type": "right"
|
||||
},
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "2.4",
|
||||
"text": "比♂利比♂利比♂利爱2",
|
||||
"text": "此生无悔入四月来世愿做友人A",
|
||||
"color": "#0ff",
|
||||
"type": "right"
|
||||
},
|
||||
{
|
||||
"author": "DIYgod",
|
||||
"time": "2.8",
|
||||
"text": "比♂利比♂利爱2.2",
|
||||
"color": "#f00",
|
||||
"type": "right"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -61,8 +61,8 @@
|
||||
autoplay: false,
|
||||
theme: '#FADFA3',
|
||||
video: {
|
||||
url: 'http://o6m1pq7od.bkt.clouddn.com/禁绝的边境线.mp4',
|
||||
pic: 'http://o6m1pq7od.bkt.clouddn.com/禁绝的边境线.jpg'
|
||||
url: 'http://o6m1pq7od.bkt.clouddn.com/最后的告白.mp4',
|
||||
pic: 'http://o6m1pq7od.bkt.clouddn.com/poster.jpg'
|
||||
},
|
||||
danmaku: {
|
||||
get: 'danmaku.json'
|
||||
|
||||
2
dist/DPlayer.min.css
vendored
2
dist/DPlayer.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/DPlayer.min.js
vendored
2
dist/DPlayer.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/DPlayer.min.js.map
vendored
2
dist/DPlayer.min.js.map
vendored
File diff suppressed because one or more lines are too long
271
src/DPlayer.js
271
src/DPlayer.js
@ -17,7 +17,8 @@
|
||||
'loop': ['0 0 32 32', 'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z'],
|
||||
'full': ['0 0 32 33', 'M6.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v4h4c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333zM30.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h4v-4c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM30.667 12c-0.8 0-1.333-0.533-1.333-1.333v-4h-4c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM1.333 12c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333h-4v4c0 0.8-0.533 1.333-1.333 1.333z'],
|
||||
'setting': ['0 0 32 29', 'M28.633 17.104c0.035 0.21 0.026 0.463-0.026 0.76s-0.14 0.598-0.262 0.904c-0.122 0.306-0.271 0.581-0.445 0.825s-0.367 0.419-0.576 0.524c-0.209 0.105-0.393 0.157-0.55 0.157s-0.332-0.035-0.524-0.105c-0.175-0.052-0.393-0.1-0.655-0.144s-0.528-0.052-0.799-0.026c-0.271 0.026-0.541 0.083-0.812 0.17s-0.502 0.236-0.694 0.445c-0.419 0.437-0.664 0.934-0.734 1.493s0.009 1.092 0.236 1.598c0.175 0.349 0.148 0.699-0.079 1.048-0.105 0.14-0.271 0.284-0.498 0.432s-0.476 0.284-0.747 0.406-0.555 0.218-0.851 0.288c-0.297 0.070-0.559 0.105-0.786 0.105-0.157 0-0.306-0.061-0.445-0.183s-0.236-0.253-0.288-0.393h-0.026c-0.192-0.541-0.52-1.009-0.982-1.402s-1-0.589-1.611-0.589c-0.594 0-1.131 0.197-1.611 0.589s-0.816 0.851-1.009 1.375c-0.087 0.21-0.218 0.362-0.393 0.458s-0.367 0.144-0.576 0.144c-0.244 0-0.52-0.044-0.825-0.131s-0.611-0.197-0.917-0.327c-0.306-0.131-0.581-0.284-0.825-0.458s-0.428-0.349-0.55-0.524c-0.087-0.122-0.135-0.266-0.144-0.432s0.057-0.397 0.197-0.694c0.192-0.402 0.266-0.86 0.223-1.375s-0.266-0.991-0.668-1.428c-0.244-0.262-0.541-0.432-0.891-0.511s-0.681-0.109-0.995-0.092c-0.367 0.017-0.742 0.087-1.127 0.21-0.244 0.070-0.489 0.052-0.734-0.052-0.192-0.070-0.371-0.231-0.537-0.485s-0.314-0.533-0.445-0.838c-0.131-0.306-0.231-0.62-0.301-0.943s-0.087-0.59-0.052-0.799c0.052-0.384 0.227-0.629 0.524-0.734 0.524-0.21 0.995-0.555 1.415-1.035s0.629-1.017 0.629-1.611c0-0.611-0.21-1.144-0.629-1.598s-0.891-0.786-1.415-0.996c-0.157-0.052-0.288-0.179-0.393-0.38s-0.157-0.406-0.157-0.616c0-0.227 0.035-0.48 0.105-0.76s0.162-0.55 0.275-0.812 0.244-0.502 0.393-0.72c0.148-0.218 0.31-0.38 0.485-0.485 0.14-0.087 0.275-0.122 0.406-0.105s0.275 0.052 0.432 0.105c0.524 0.21 1.070 0.275 1.637 0.197s1.070-0.327 1.506-0.747c0.21-0.209 0.362-0.467 0.458-0.773s0.157-0.607 0.183-0.904c0.026-0.297 0.026-0.568 0-0.812s-0.048-0.419-0.065-0.524c-0.035-0.105-0.066-0.227-0.092-0.367s-0.013-0.262 0.039-0.367c0.105-0.244 0.293-0.458 0.563-0.642s0.563-0.336 0.878-0.458c0.314-0.122 0.62-0.214 0.917-0.275s0.533-0.092 0.707-0.092c0.227 0 0.406 0.074 0.537 0.223s0.223 0.301 0.275 0.458c0.192 0.471 0.507 0.886 0.943 1.244s0.952 0.537 1.546 0.537c0.611 0 1.153-0.17 1.624-0.511s0.803-0.773 0.996-1.297c0.070-0.14 0.179-0.284 0.327-0.432s0.301-0.223 0.458-0.223c0.244 0 0.511 0.035 0.799 0.105s0.572 0.166 0.851 0.288c0.279 0.122 0.537 0.279 0.773 0.472s0.423 0.402 0.563 0.629c0.087 0.14 0.113 0.293 0.079 0.458s-0.070 0.284-0.105 0.354c-0.227 0.506-0.297 1.039-0.21 1.598s0.341 1.048 0.76 1.467c0.419 0.419 0.934 0.651 1.546 0.694s1.179-0.057 1.703-0.301c0.14-0.087 0.31-0.122 0.511-0.105s0.371 0.096 0.511 0.236c0.262 0.244 0.493 0.616 0.694 1.113s0.336 1 0.406 1.506c0.035 0.297-0.013 0.528-0.144 0.694s-0.266 0.275-0.406 0.327c-0.542 0.192-1.004 0.528-1.388 1.009s-0.576 1.026-0.576 1.637c0 0.594 0.162 1.113 0.485 1.559s0.747 0.764 1.27 0.956c0.122 0.070 0.227 0.14 0.314 0.21 0.192 0.157 0.323 0.358 0.393 0.602v0zM16.451 19.462c0.786 0 1.528-0.149 2.227-0.445s1.305-0.707 1.821-1.231c0.515-0.524 0.921-1.131 1.218-1.821s0.445-1.428 0.445-2.214c0-0.786-0.148-1.524-0.445-2.214s-0.703-1.292-1.218-1.808c-0.515-0.515-1.122-0.921-1.821-1.218s-1.441-0.445-2.227-0.445c-0.786 0-1.524 0.148-2.214 0.445s-1.292 0.703-1.808 1.218c-0.515 0.515-0.921 1.118-1.218 1.808s-0.445 1.428-0.445 2.214c0 0.786 0.149 1.524 0.445 2.214s0.703 1.297 1.218 1.821c0.515 0.524 1.118 0.934 1.808 1.231s1.428 0.445 2.214 0.445v0z'],
|
||||
'right': ['0 0 32 32', 'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z']
|
||||
'right': ['0 0 32 32', 'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z'],
|
||||
'comment': ['0 0 32 32', 'M27.128 0.38h-22.553c-2.336 0-4.229 1.825-4.229 4.076v16.273c0 2.251 1.893 4.076 4.229 4.076h4.229v-2.685h8.403l-8.784 8.072 1.566 1.44 7.429-6.827h9.71c2.335 0 4.229-1.825 4.229-4.076v-16.273c0-2.252-1.894-4.076-4.229-4.076zM28.538 19.403c0 1.5-1.262 2.717-2.819 2.717h-8.36l-0.076-0.070-0.076 0.070h-11.223c-1.557 0-2.819-1.217-2.819-2.717v-13.589c0-1.501 1.262-2.718 2.819-2.718h19.734c1.557 0 2.819-0.141 2.819 1.359v14.947zM9.206 10.557c-1.222 0-2.215 0.911-2.215 2.036s0.992 2.035 2.215 2.035c1.224 0 2.216-0.911 2.216-2.035s-0.992-2.036-2.216-2.036zM22.496 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.224 0 2.215-0.911 2.215-2.035s-0.991-2.036-2.215-2.036zM15.852 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.222 0 2.215-0.911 2.215-2.035s-0.992-2.036-2.215-2.036z']
|
||||
};
|
||||
this.getSVG = (type) => {
|
||||
return `
|
||||
@ -89,7 +90,7 @@
|
||||
func();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* AutoLink initialization function
|
||||
@ -97,7 +98,8 @@
|
||||
init() {
|
||||
this.element = this.option.element;
|
||||
|
||||
let eleHTML = `
|
||||
this.element.innerHTML = `
|
||||
<div class="dplayer-mask"></div>
|
||||
<div class="dplayer-video-wrap">
|
||||
<video class="dplayer-video" poster="${this.option.video.pic}">
|
||||
<source src="${this.option.video.url}" type="video/mp4">
|
||||
@ -129,21 +131,13 @@
|
||||
<button class="dplayer-icon dplayer-setting-icon">`
|
||||
+ this.getSVG('setting')
|
||||
+ ` </button>
|
||||
<div class="dplayer-setting-box">
|
||||
<div class="dplayer-setting-item dplayer-setting-loop">
|
||||
<span class="dplayer-label">洗脑循环</span>
|
||||
<div class="dplayer-toggle">
|
||||
<input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle" id="dplayer-toggle">
|
||||
<label for="dplayer-toggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dplayer-setting-item dplayer-setting-speed">
|
||||
<span class="dplayer-label">速度</span>
|
||||
<div class="dplayer-toggle">`
|
||||
+ this.getSVG('right')
|
||||
+ ` </div>
|
||||
</div>
|
||||
<div class="dplayer-setting-box"></div>
|
||||
</div>
|
||||
<div class="dplayer-comment">
|
||||
<button class="dplayer-icon dplayer-comment-icon">`
|
||||
+ this.getSVG('comment')
|
||||
+ ` </button>
|
||||
<div class="dplayer-comment-box"></div>
|
||||
</div>
|
||||
<button class="dplayer-icon dplayer-full-icon">`
|
||||
+ this.getSVG('full')
|
||||
@ -159,27 +153,12 @@
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.element.innerHTML = eleHTML;
|
||||
|
||||
// get this audio object
|
||||
this.audio = this.element.getElementsByClassName('dplayer-video')[0];
|
||||
|
||||
this.ptime = this.element.getElementsByClassName('dplayer-ptime')[0];
|
||||
|
||||
// hide controller if mouse stops for 2 seconds
|
||||
let hideTime = 0;
|
||||
const hideController = () => {
|
||||
this.element.classList.remove('dplayer-hide-controller');
|
||||
clearTimeout(hideTime);
|
||||
hideTime = setTimeout(() => {
|
||||
if (this.audio.played.length) {
|
||||
this.element.classList.add('dplayer-hide-controller');
|
||||
}
|
||||
}, 2000);
|
||||
};
|
||||
this.element.addEventListener('mousemove', hideController);
|
||||
this.element.addEventListener('click', hideController);
|
||||
|
||||
// play and pause button
|
||||
this.playButton = this.element.getElementsByClassName('dplayer-play-icon')[0];
|
||||
this.toggle = () => {
|
||||
@ -197,9 +176,43 @@
|
||||
// control play progress
|
||||
this.playedBar = this.element.getElementsByClassName('dplayer-played')[0];
|
||||
this.loadedBar = this.element.getElementsByClassName('dplayer-loaded')[0];
|
||||
this.thumb = this.element.getElementsByClassName('dplayer-thumb')[0];
|
||||
this.bar = this.element.getElementsByClassName('dplayer-bar-wrap')[0];
|
||||
let barWidth;
|
||||
|
||||
this.audio.addEventListener('seeked', () => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.setTime = () => {
|
||||
if (this.option.danmaku) {
|
||||
this.playedTime = setInterval(() => {
|
||||
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
|
||||
this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
|
||||
this.trigger('playing');
|
||||
|
||||
const item = this.dan[this.danIndex];
|
||||
if (item && this.audio.currentTime >= item.time) {
|
||||
this.danmakuIn(item.text, item.color, item.type);
|
||||
this.danIndex++;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
else {
|
||||
this.playedTime = setInterval(() => {
|
||||
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
|
||||
this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
|
||||
this.trigger('playing');
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
this.bar.addEventListener('click', (event) => {
|
||||
const e = event || window.event;
|
||||
barWidth = this.bar.clientWidth;
|
||||
@ -224,11 +237,7 @@
|
||||
document.removeEventListener('mouseup', thumbUp);
|
||||
document.removeEventListener('mousemove', thumbMove);
|
||||
this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;
|
||||
this.playedTime = setInterval(() => {
|
||||
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
|
||||
this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);
|
||||
this.trigger('playing');
|
||||
}, 100);
|
||||
this.setTime();
|
||||
};
|
||||
|
||||
this.bar.addEventListener('mousedown', () => {
|
||||
@ -329,53 +338,23 @@
|
||||
return actualTop - elementScrollTop;
|
||||
}
|
||||
|
||||
// toggle setting box
|
||||
const settingIcon = this.element.getElementsByClassName('dplayer-setting-icon')[0];
|
||||
const settingBox = this.element.getElementsByClassName('dplayer-setting-box')[0];
|
||||
settingIcon.addEventListener('click', () => {
|
||||
if (settingBox.classList.contains('dplayer-setting-box-open')) {
|
||||
settingBox.classList.remove('dplayer-setting-box-open')
|
||||
}
|
||||
else {
|
||||
settingBox.classList.add('dplayer-setting-box-open')
|
||||
}
|
||||
});
|
||||
|
||||
// setting
|
||||
const settingEvent = () => {
|
||||
// loop control
|
||||
const loopEle = this.element.getElementsByClassName('dplayer-setting-loop')[0];
|
||||
const loopToggle = loopEle.getElementsByClassName('dplayer-toggle-setting-input')[0];
|
||||
loopEle.addEventListener('click', () => {
|
||||
loopToggle.checked = !loopToggle.checked;
|
||||
if (loopToggle.checked) {
|
||||
this.loop = true;
|
||||
this.audio.loop = this.loop;
|
||||
}
|
||||
else {
|
||||
this.loop = false;
|
||||
this.audio.loop = this.loop;
|
||||
}
|
||||
settingBox.classList.remove('dplayer-setting-box-open');
|
||||
});
|
||||
loopToggle.addEventListener('change', () => {
|
||||
if (loopToggle.checked) {
|
||||
this.loop = true;
|
||||
this.audio.loop = this.loop;
|
||||
}
|
||||
else {
|
||||
this.loop = false;
|
||||
this.audio.loop = this.loop;
|
||||
}
|
||||
settingBox.classList.remove('dplayer-setting-box-open');
|
||||
});
|
||||
|
||||
// speed control
|
||||
const settingBack = settingBox.innerHTML;
|
||||
const speedEle = this.element.getElementsByClassName('dplayer-setting-speed')[0];
|
||||
speedEle.addEventListener('click', () => {
|
||||
settingBox.classList.add('dplayer-setting-box-narrow');
|
||||
settingBox.innerHTML = `
|
||||
const settingHTML = {
|
||||
'original': `
|
||||
<div class="dplayer-setting-item dplayer-setting-loop">
|
||||
<span class="dplayer-label">洗脑循环</span>
|
||||
<div class="dplayer-toggle">
|
||||
<input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle" id="dplayer-toggle">
|
||||
<label for="dplayer-toggle"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dplayer-setting-item dplayer-setting-speed">
|
||||
<span class="dplayer-label">速度</span>
|
||||
<div class="dplayer-toggle">`
|
||||
+ this.getSVG('right')
|
||||
+ ` </div>
|
||||
</div>`,
|
||||
'speed': `
|
||||
<div class="dplayer-setting-speed-item" data-speed="0.5">
|
||||
<span class="dplayer-label">0.5</span>
|
||||
</div>
|
||||
@ -393,24 +372,101 @@
|
||||
</div>
|
||||
<div class="dplayer-setting-speed-item" data-speed="2">
|
||||
<span class="dplayer-label">2</span>
|
||||
</div>`;
|
||||
</div>`
|
||||
};
|
||||
|
||||
// toggle setting box
|
||||
const settingIcon = this.element.getElementsByClassName('dplayer-setting-icon')[0];
|
||||
const settingBox = this.element.getElementsByClassName('dplayer-setting-box')[0];
|
||||
const mask = this.element.getElementsByClassName('dplayer-mask')[0];
|
||||
settingBox.innerHTML = settingHTML.original;
|
||||
|
||||
const closeSetting = () => {
|
||||
if (settingBox.classList.contains('dplayer-setting-box-open')) {
|
||||
settingBox.classList.remove('dplayer-setting-box-open');
|
||||
mask.classList.remove('dplayer-mask-show');
|
||||
setTimeout(() => {
|
||||
settingBox.classList.remove('dplayer-setting-box-narrow');
|
||||
settingBox.innerHTML = settingHTML.original;
|
||||
settingEvent();
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
const openSetting = () => {
|
||||
settingBox.classList.add('dplayer-setting-box-open');
|
||||
mask.classList.add('dplayer-mask-show');
|
||||
};
|
||||
|
||||
mask.addEventListener('click', () => {
|
||||
closeSetting();
|
||||
});
|
||||
settingIcon.addEventListener('click', () => {
|
||||
openSetting();
|
||||
});
|
||||
|
||||
const settingEvent = () => {
|
||||
// loop control
|
||||
const loopEle = this.element.getElementsByClassName('dplayer-setting-loop')[0];
|
||||
const loopToggle = loopEle.getElementsByClassName('dplayer-toggle-setting-input')[0];
|
||||
|
||||
loopToggle.checked = this.loop;
|
||||
|
||||
loopEle.addEventListener('click', () => {
|
||||
loopToggle.checked = !loopToggle.checked;
|
||||
if (loopToggle.checked) {
|
||||
this.loop = true;
|
||||
this.audio.loop = this.loop;
|
||||
}
|
||||
else {
|
||||
this.loop = false;
|
||||
this.audio.loop = this.loop;
|
||||
}
|
||||
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();
|
||||
});
|
||||
|
||||
// speed control
|
||||
const speedEle = this.element.getElementsByClassName('dplayer-setting-speed')[0];
|
||||
speedEle.addEventListener('click', () => {
|
||||
settingBox.classList.add('dplayer-setting-box-narrow');
|
||||
settingBox.innerHTML = settingHTML.speed;
|
||||
|
||||
const speedItem = settingBox.getElementsByClassName('dplayer-setting-speed-item');
|
||||
for (let i = 0; i < speedItem.length; i++) {
|
||||
speedItem[i].addEventListener('click', () => {
|
||||
this.audio.playbackRate = speedItem[i].dataset.speed;
|
||||
settingBox.classList.remove('dplayer-setting-box-narrow');
|
||||
setTimeout(() => {
|
||||
settingBox.innerHTML = settingBack;
|
||||
settingEvent();
|
||||
}, 300);
|
||||
settingBox.classList.remove('dplayer-setting-box-open');
|
||||
closeSetting();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
settingEvent();
|
||||
|
||||
// hide controller if mouse stops for 2 seconds
|
||||
let hideTime = 0;
|
||||
const hideController = () => {
|
||||
this.element.classList.remove('dplayer-hide-controller');
|
||||
clearTimeout(hideTime);
|
||||
hideTime = setTimeout(() => {
|
||||
if (this.audio.played.length) {
|
||||
this.element.classList.add('dplayer-hide-controller');
|
||||
closeSetting();
|
||||
}
|
||||
}, 2000);
|
||||
};
|
||||
this.element.addEventListener('mousemove', hideController);
|
||||
this.element.addEventListener('click', hideController);
|
||||
|
||||
// full screen
|
||||
this.element.getElementsByClassName('dplayer-full-icon')[0].addEventListener('click', () => {
|
||||
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
|
||||
@ -488,18 +544,24 @@
|
||||
const itemHeight = 30;
|
||||
const itemY = danHeight / itemHeight;
|
||||
let danTunnel = {};
|
||||
window.danTunnel = danTunnel;
|
||||
|
||||
const danItemRight = (ele) => {
|
||||
return danContainer.getBoundingClientRect().right - ele.getBoundingClientRect().right;
|
||||
};
|
||||
|
||||
const danSpeed = (ele) => {
|
||||
return (danWidth + ele.offsetWidth) / 5;
|
||||
};
|
||||
|
||||
const getTunnel = (ele) => {
|
||||
const tmp = danWidth / danSpeed(ele);
|
||||
|
||||
for (let i = 0; i <= itemY - 1; i++) {
|
||||
let item = danTunnel[i + ''];
|
||||
if (item && item.length) {
|
||||
for (let j = 0; j < item.length; j++) {
|
||||
if (danItemRight(item[j]) <= 0) {
|
||||
const danRight = danItemRight(item[j]);
|
||||
if (danRight <= 640 - (tmp * danSpeed(item[j])) || danRight <= 0) {
|
||||
break;
|
||||
}
|
||||
if (j === item.length - 1) {
|
||||
@ -550,7 +612,7 @@
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
|
||||
this.dan = JSON.parse(xhr.responseText).danmaku;
|
||||
this.dan = JSON.parse(xhr.responseText).danmaku.sort((a, b) => a.time - b.time);
|
||||
console.log(this.dan);
|
||||
|
||||
// autoplay
|
||||
@ -591,26 +653,7 @@
|
||||
if (this.playedTime) {
|
||||
clearInterval(this.playedTime);
|
||||
}
|
||||
if (this.option.danmaku) {
|
||||
this.playedTime = setInterval(() => {
|
||||
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
|
||||
this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
|
||||
this.trigger('playing');
|
||||
|
||||
const item = this.dan[this.danIndex];
|
||||
if (item && this.audio.currentTime >= item.time) {
|
||||
this.danmakuIn(item.text, item.color, item.type);
|
||||
this.danIndex++;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
else {
|
||||
this.playedTime = setInterval(() => {
|
||||
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
|
||||
this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
|
||||
this.trigger('playing');
|
||||
}, 100);
|
||||
}
|
||||
this.setTime();
|
||||
this.element.classList.add('dplayer-playing');
|
||||
this.trigger('play');
|
||||
}
|
||||
|
||||
@ -39,6 +39,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dplayer-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
|
||||
&.dplayer-mask-show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dplayer-video-wrap {
|
||||
position: relative;
|
||||
background: #000;
|
||||
@ -58,7 +72,7 @@
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
|
||||
.dplayer-danmaku-item {
|
||||
@ -200,6 +214,10 @@
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.dplayer-comment-icon {
|
||||
padding: 10px 9px 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.dplayer-svg-shadow {
|
||||
@ -294,6 +312,7 @@
|
||||
padding: 7px 0;
|
||||
transition: all .3s ease-in-out;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
|
||||
&.dplayer-setting-box-open {
|
||||
transform: translateX(0);
|
||||
@ -319,6 +338,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dplayer-comment {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dplayer-label {
|
||||
color: #eee;
|
||||
font-size: 13px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user