mirrors/DPlayer
1
0
Fork 0
mirror of https://github.com/DIYgod/DPlayer synced 2024-11-22 18:56:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

1. new parameter: danmaku.maximum

Browse Source 
2. rm svg shadow
3. new menu item
4. more intensive danmaku
5. alert error
6. fix some bugs
This commit is contained in:
DIYgod 2016-05-26 21:18:24 +08:00
parent 79f7a28183
commit 9b400b0188
8 changed files with 94 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -11,8 +11,6 @@
## Introduction
**Notice:** This player is still under development.
[Demo](http://diygod.github.io/DPlayer/demo/)
Screenshot
@ -58,7 +56,8 @@ var option = {
danmaku: { // Optional, showing danmaku
id: '9E2E3368B56CDBB4', // Required, danmaku id, MUST BE UNIQUE, CAN NOT USE THESE IN YOUR NEW PLAYER: `https://dplayer.daoapp.io/list`
api: 'https://dplayer.daoapp.io/', // Required, danmaku api
token: 'tokendemo' // Optional, danmaku token for api
token: 'tokendemo', // Optional, danmaku token for api
maximum: 1000 // Optional, maximum quantity of danmaku
}
}
```
@ -85,9 +84,8 @@ var option = {
```js
var DPlayer = require('DPlayer');
var dp = new DPlayer({
// ...
});
var dp = new DPlayer(option);
dp.init();
```
### Danmaku back-end
@ -124,6 +122,8 @@ $ npm run build
## Todo
- [ ] 记录播放位置 记录透明度
- [ ] 中英文切换
- [ ] 微博登录
@ -132,6 +132,8 @@ $ npm run build
- [ ] icon 动画
- [ ] 字体
## LICENSE
MIT © [DIYgod](http://github.com/DIYgod)

3
demo/index.html
View File

@ -68,7 +68,8 @@
danmaku: {
id: '9E2E3368B56CDBB4',
api: 'https://dplayer.daoapp.io/',
token: 'tokendemo'
token: 'tokendemo',
maximum: 1000
}
});
dp.init();

2
dist/DPlayer.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "dplayer",
"version": "0.1.4",
"version": "1.0.0",
"description": "Wow, such a lovely HTML5 danmaku video player",
"main": "dist/DPlayer.min.js",
"scripts": {

126
src/DPlayer.js
View File

@ -25,7 +25,7 @@
this.getSVG = (type) => {
return `
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="${this.svg[type][0]}" width="100%">
<use class="dplayer-svg-shadow" xlink:href="#dplayer-${type}"></use>
<use xlink:href="#dplayer-${type}"></use>
<path class="dplayer-fill" d="${this.svg[type][1]}" id="dplayer-${type}"></path>
</svg>
`;
@ -248,6 +248,7 @@
</div>
<div class="dplayer-menu">
<div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="http://diygod.me/">关于作者</a></span></div>
<div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer/issues">播放器意见反馈</a></span></div>
<div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer">关于 DPlayer 播放器</a></span></div>
</div>
`;
@ -328,7 +329,7 @@
let barWidth;
if (this.option.danmaku) {
this.audio.addEventListener('seeked', () => {
this.audio.addEventListener('seeking', () => {
for (let i = 0; i < this.dan.length; i++) {
if (this.dan[i].time >= this.audio.currentTime) {
this.danIndex = i;
@ -343,57 +344,42 @@
let currentPlayPos = 0;
let bufferingDetected = false;
this.setTime = () => {
if (this.option.danmaku) {
this.playedTime = setInterval(() => {
// whether the video is buffering
currentPlayPos = this.audio.currentTime;
if (!bufferingDetected
&& currentPlayPos < (lastPlayPos + 0.01)
&& !this.audio.paused) {
this.element.classList.add('dplayer-loading');
bufferingDetected = true;
}
if (bufferingDetected
&& currentPlayPos > (lastPlayPos + 0.01)
&& !this.audio.paused) {
this.element.classList.remove('dplayer-loading');
bufferingDetected = false;
}
lastPlayPos = currentPlayPos;
this.playedTime = setInterval(() => {
// whether the video is buffering
currentPlayPos = this.audio.currentTime;
if (!bufferingDetected
&& currentPlayPos < (lastPlayPos + 0.01)
&& !this.audio.paused) {
this.element.classList.add('dplayer-loading');
bufferingDetected = true;
}
if (bufferingDetected
&& currentPlayPos > (lastPlayPos + 0.01)
&& !this.audio.paused) {
this.element.classList.remove('dplayer-loading');
bufferingDetected = false;
}
lastPlayPos = currentPlayPos;
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 >= parseFloat(item.time)) {
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
this.trigger('playing');
}, 100);
if (this.option.danmaku) {
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);
this.danIndex++;
item = this.dan[this.danIndex];
}
}, 100);
}, 0);
}
else {
this.playedTime = setInterval(() => {
// whether the video is buffering
currentPlayPos = this.audio.currentTime;
if (!bufferingDetected
&& currentPlayPos < (lastPlayPos + 0.01)
&& !this.audio.paused) {
this.element.classList.add('dplayer-loading');
bufferingDetected = true
}
if (bufferingDetected
&& currentPlayPos > (lastPlayPos + 0.01)
&& !this.audio.paused) {
this.element.classList.remove('dplayer-loading');
bufferingDetected = false
}
lastPlayPos = currentPlayPos;
this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');
this.ptime.innerHTML = this.secondToTime(this.audio.currentTime);
this.trigger('playing');
}, 100);
};
this.clearTime = () => {
clearInterval(this.playedTime);
if (this.option.danmaku) {
clearInterval(this.danmakuTime);
}
};
@ -425,7 +411,7 @@
this.bar.addEventListener('mousedown', () => {
barWidth = this.bar.clientWidth;
clearInterval(this.playedTime);
this.clearTime();
document.addEventListener('mousemove', thumbMove);
document.addEventListener('mouseup', thumbUp);
});
@ -773,7 +759,7 @@
if (item && item.length) {
for (let j = 0; j < item.length; j++) {
const danRight = danItemRight(item[j]) - 10;
if (danRight <= 640 - (tmp * danSpeed(item[j])) || danRight <= 0) {
if (danRight <= danWidth - (tmp * danSpeed(item[j])) || danRight <= 0) {
break;
}
if (j === item.length - 1) {
@ -798,7 +784,7 @@
this.danmakuIn = (text, color, type) => {
danWidth = danContainer.offsetWidth;
danHeight = danContainer.offsetHeight;
itemY = danHeight / itemHeight;
itemY = parseInt(danHeight / itemHeight);
let item = document.createElement(`div`);
item.classList.add(`dplayer-danmaku-item`);
item.classList.add(`dplayer-danmaku-${type}`);
@ -846,14 +832,26 @@
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
this.dan = JSON.parse(xhr.responseText).danmaku.sort((a, b) => a.time - b.time);
// autoplay
if (this.option.autoplay && !this.isMobile) {
this.play();
const response = JSON.parse(xhr.responseText);
if (response.code !== 1) {
alert(response.msg);
}
else if (this.isMobile) {
this.pause();
else {
if (this.option.danmaku.maximum) {
this.maximum = parseInt(this.option.danmaku.maximum);
this.dan = response.danmaku.splice(-this.maximum, this.maximum).sort((a, b) => a.time - b.time);
}
else {
this.dan = response.danmaku.sort((a, b) => a.time - b.time);
}
// autoplay
if (this.option.autoplay && !this.isMobile) {
this.play();
}
else if (this.isMobile) {
this.pause();
}
}
}
else {
@ -916,7 +914,13 @@
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
console.log('Post danmaku: ', JSON.parse(xhr.responseText));
const response = JSON.parse(xhr.responseText);
if (response.code !== 1) {
alert(response.msg);
}
else {
console.log('Post danmaku: ', JSON.parse(xhr.responseText));
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
@ -1128,7 +1132,7 @@
this.audio.play();
if (this.playedTime) {
clearInterval(this.playedTime);
this.clearTime();
}
this.setTime();
this.element.classList.add('dplayer-playing');
@ -1150,7 +1154,7 @@
this.ended = false;
this.playButton.innerHTML = this.getSVG('play');
this.audio.pause();
clearInterval(this.playedTime);
this.clearTime();
this.element.classList.remove('dplayer-playing');
this.trigger('pause');
}

39
src/DPlayer.scss
View File

@ -9,16 +9,20 @@
height: 100%;
background: #000;
.dplayer-danmaku-top,
.dplayer-danmaku-bottom {
&.dplayer-danmaku-move {
animation: danmaku-center 8s linear !important;
.dplayer-danmaku {
.dplayer-danmaku-top,
.dplayer-danmaku-bottom {
&.dplayer-danmaku-move {
animation: danmaku-center 6s linear;
animation-play-state: paused;
}
}
}
.dplayer-danmaku-right {
&.dplayer-danmaku-move {
animation: danmaku 8s linear !important;;
.dplayer-danmaku-right {
&.dplayer-danmaku-move {
animation: danmaku 8s linear;
animation-play-state: paused;
}
}
}
}
@ -161,7 +165,7 @@
&.dplayer-danmaku-move {
will-change: visibility;
animation: danmaku-center 5s linear;
animation: danmaku-center 4s linear;
animation-play-state: paused;
}
}
@ -391,13 +395,6 @@
}
}
.dplayer-svg-shadow {
stroke: #000;
stroke-opacity: .1;
stroke-width: 2px;
fill: none;
}
.dplayer-fill {
fill: #fff;
}
@ -615,10 +612,6 @@
transition: all .2s ease-in-out;
fill: #ddd;
}
.dplayer-svg-shadow {
stroke: none;
}
}
.dplayer-comment-setting-box {
@ -739,10 +732,6 @@
transition: all .2s ease-in-out;
fill: #ddd;
}
.dplayer-svg-shadow {
stroke: none;
}
}
}
}
@ -828,7 +817,7 @@
width: 150px;
border-radius: 2px;
background: rgba(28, 28, 28, 0.9);
padding: 7px 0;
padding: 5px 0;
overflow: hidden;
z-index: 3;
display: none;