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

optimize mobile display

Browse Source
This commit is contained in:
DIYgod 2016-10-12 01:03:36 +08:00
parent 5b720441e9
commit b31bc4c1dc
No known key found for this signature in database
GPG Key ID: F8797DD1088C6506
5 changed files with 58 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -59,7 +59,7 @@ var option = {
id: '9E2E3368B56CDBB4', // Required, danmaku id, NOTICE: it 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
maximum: 1000 // Optional, maximum quantity of danmaku
maximum: 1000, // Optional, maximum quantity of danmaku
addition: ['https://dplayer.daoapp.io/bilibili?aid=4157142'] // Optional, additional danmaku, see: `Bilibili 弹幕支持`
}
}

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": "1.1.0",
"version": "1.1.1",
"description": "Wow, such a lovely HTML5 danmaku video player",
"main": "dist/DPlayer.min.js",
"scripts": {

60
src/DPlayer.js
View File

@ -1,4 +1,4 @@
console.log("\n %c DPlayer 1.1.0 %c http://dplayer.js.org \n\n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;");
console.log("\n %c DPlayer 1.1.1 %c http://dplayer.js.org \n\n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;");
require('./DPlayer.scss');
@ -119,20 +119,10 @@ class DPlayer {
this.element.classList.add('dplayer-no-danmaku');
}
if (isMobile) {
this.element.innerHTML = `
<div class="dplayer-video-wrap">
<video class="dplayer-video" ${this.option.video.pic ? `poster="${this.option.video.pic}"` : ``} preload="${this.option.preload}" controls>
<source src="${this.option.video.url}">
</video>
</div>`;
return;
}
this.element.innerHTML = `
<div class="dplayer-mask"></div>
<div class="dplayer-video-wrap">
<video class="dplayer-video" ${this.option.video.pic ? `poster="${this.option.video.pic}"` : ``} ${this.option.screenshot ? `crossorigin="anonymous"` : ``} preload="${this.option.preload}" src="${this.option.video.url}"></video>
<video class="dplayer-video" ${this.option.video.pic ? `poster="${this.option.video.pic}"` : ``} webkit-playsinline ${this.option.screenshot ? `crossorigin="anonymous"` : ``} preload="${this.option.preload}" src="${this.option.video.url}"></video>
<div class="dplayer-danmaku">
<div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>
</div>
@ -175,7 +165,7 @@ class DPlayer {
<button class="dplayer-icon dplayer-play-icon">`
+ this.getSVG('play')
+ ` </button>
<div class="dplayer-volume">
<div class="dplayer-volume" ${isMobile ? 'style="display: none;"' : ''}>
<button class="dplayer-icon dplayer-volume-icon">`
+ this.getSVG('volume-down')
+ ` </button>
@ -191,7 +181,7 @@ class DPlayer {
</div>
<div class="dplayer-icons dplayer-icons-right">
${this.option.screenshot ? `
<a href="#" class="dplayer-icon dplayer-camera-icon">`
<a href="#" class="dplayer-icon dplayer-camera-icon" ${isMobile ? 'style="display: none;"' : ''}dplayer-volume>`
+ this.getSVG('camera')
+ ` </a>
` : ``}
@ -279,6 +269,14 @@ class DPlayer {
</div>
`;
// arrow style
var arrow = this.element.offsetWidth <= 500;
if (arrow) {
var arrowStyle = document.createElement('style');
arrowStyle.innerHTML = `.dplayer .dplayer-danmaku{font-size:18px}`;
document.head.appendChild(arrowStyle);
}
// get this video object
this.video = this.element.getElementsByClassName('dplayer-video')[0];
@ -834,7 +832,7 @@ class DPlayer {
/**
* danmaku display
*/
const itemHeight = 30;
const itemHeight = arrow ? 24: 30;
let danWidth;
let danHeight;
let itemY;
@ -1382,6 +1380,37 @@ class DPlayer {
if (response.code !== 1) {
alert(response.msg);
}
else {
if (this.option.danmaku.addition) {
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
const response2 = JSON.parse(xhr.responseText);
if (response2.code !== 1) {
alert(response2.msg);
}
else {
this.danIndex = 0;
this.dan = response.danmaku.concat(response2.danmaku).sort((a, b) => a.time - b.time);
this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';
// autoplay
if (this.option.autoplay && !isMobile) {
this.play();
}
else if (isMobile) {
this.pause();
}
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open('get', this.option.danmaku.addition[0], true);
xhr.send(null);
}
else {
this.danIndex = 0;
this.dan = response.danmaku.sort((a, b) => a.time - b.time);
@ -1396,6 +1425,7 @@ class DPlayer {
}
}
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
}