mirror of
https://github.com/DIYgod/DPlayer
synced 2024-11-22 18:56:54 +00:00
New option: screenshot; Hiding comment box bug; Hotkey conflict bug
This commit is contained in:
DIYgod
parent
f8c8560af9
commit
c526ad734d
@ -50,12 +50,13 @@ var option = {
|
||||
theme: '#FADFA3', // Optional, theme color, default: #b7daff
|
||||
loop: true, // Optional, loop play music, default: true
|
||||
lang: 'zh', // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language
|
||||
screenshot: true, // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
|
||||
video: { // Required, video info
|
||||
url: '若能绽放光芒.mp4', // Required, video url
|
||||
pic: '若能绽放光芒.png' // Optional, music picture
|
||||
url: '若能绽放光芒.mp4', // Required, video url
|
||||
pic: '若能绽放光芒.png' // Optional, music picture
|
||||
},
|
||||
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`
|
||||
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
|
||||
|
||||
@ -61,6 +61,7 @@
|
||||
autoplay: false,
|
||||
theme: '#FADFA3',
|
||||
loop: true,
|
||||
screenshot: true,
|
||||
video: {
|
||||
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
|
||||
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
|
||||
|
||||
6
dist/DPlayer.min.js
vendored
6
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
114
src/DPlayer.js
114
src/DPlayer.js
@ -46,7 +46,8 @@ class DPlayer {
|
||||
autoplay: false,
|
||||
theme: '#b7daff',
|
||||
loop: false,
|
||||
lang: navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en'
|
||||
lang: navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en',
|
||||
screenshot: false
|
||||
};
|
||||
for (let defaultKey in defaultOption) {
|
||||
if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
|
||||
@ -137,7 +138,7 @@ class DPlayer {
|
||||
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}"` : ``} crossorigin="anonymous">
|
||||
<video class="dplayer-video" ${this.option.video.pic ? `poster="${this.option.video.pic}"` : ``} ${this.option.screenshot ? `crossorigin="anonymous"` : ``}>
|
||||
<source src="${this.option.video.url}">
|
||||
</video>
|
||||
<div class="dplayer-danmaku"></div>
|
||||
@ -195,9 +196,11 @@ class DPlayer {
|
||||
<span class="dplayer-time"><span class="dplayer-ptime">0:00</span> / <span class="dplayer-dtime">0:00</span></span>
|
||||
</div>
|
||||
<div class="dplayer-icons dplayer-icons-right">
|
||||
${this.option.screenshot ? `
|
||||
<a href="#" class="dplayer-icon dplayer-camera-icon">`
|
||||
+ this.getSVG('camera')
|
||||
+ ` </a>
|
||||
` : ``}
|
||||
<div class="dplayer-comment">
|
||||
<button class="dplayer-icon dplayer-comment-icon">`
|
||||
+ this.getSVG('comment')
|
||||
@ -546,8 +549,8 @@ class DPlayer {
|
||||
/**
|
||||
* auto hide controller
|
||||
*/
|
||||
let hideTime = 0;
|
||||
if (!this.isMobile) {
|
||||
let hideTime = 0;
|
||||
const hideController = () => {
|
||||
this.element.classList.remove('dplayer-hide-controller');
|
||||
clearTimeout(hideTime);
|
||||
@ -660,7 +663,6 @@ class DPlayer {
|
||||
loopToggle.checked = this.loop;
|
||||
|
||||
loopEle.addEventListener('click', () => {
|
||||
console.log('loop1');
|
||||
loopToggle.checked = !loopToggle.checked;
|
||||
if (loopToggle.checked) {
|
||||
this.loop = true;
|
||||
@ -1055,7 +1057,6 @@ class DPlayer {
|
||||
clearInterval(disableHide);
|
||||
this.element.classList.remove('dplayer-show-controller');
|
||||
closeCommentSetting();
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
};
|
||||
const openComment = () => {
|
||||
@ -1065,7 +1066,6 @@ class DPlayer {
|
||||
clearTimeout(hideTime);
|
||||
}, 1000);
|
||||
this.element.classList.add('dplayer-show-controller');
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
|
||||
mask.addEventListener('click', () => {
|
||||
@ -1152,45 +1152,47 @@ class DPlayer {
|
||||
* hot key
|
||||
*/
|
||||
const handleKeyDown = (e) => {
|
||||
const event = e || window.event;
|
||||
let percentage;
|
||||
switch (event.keyCode) {
|
||||
case 32:
|
||||
event.preventDefault();
|
||||
this.toggle();
|
||||
break;
|
||||
case 37:
|
||||
event.preventDefault();
|
||||
this.audio.currentTime = this.audio.currentTime -5;
|
||||
break;
|
||||
case 39:
|
||||
event.preventDefault();
|
||||
this.audio.currentTime = this.audio.currentTime + 5;
|
||||
break;
|
||||
case 38:
|
||||
event.preventDefault();
|
||||
percentage = this.audio.volume + 0.1;
|
||||
percentage = percentage > 0 ? percentage : 0;
|
||||
percentage = percentage < 1 ? percentage : 1;
|
||||
this.updateBar('volume', percentage, 'width');
|
||||
this.audio.volume = percentage;
|
||||
if (this.audio.muted) {
|
||||
this.audio.muted = false;
|
||||
}
|
||||
switchVolumeIcon();
|
||||
break;
|
||||
case 40:
|
||||
event.preventDefault();
|
||||
percentage = this.audio.volume - 0.1;
|
||||
percentage = percentage > 0 ? percentage : 0;
|
||||
percentage = percentage < 1 ? percentage : 1;
|
||||
this.updateBar('volume', percentage, 'width');
|
||||
this.audio.volume = percentage;
|
||||
if (this.audio.muted) {
|
||||
this.audio.muted = false;
|
||||
}
|
||||
switchVolumeIcon();
|
||||
break;
|
||||
if (document.activeElement.tagName.toUpperCase() !== 'INPUT') {
|
||||
const event = e || window.event;
|
||||
let percentage;
|
||||
switch (event.keyCode) {
|
||||
case 32:
|
||||
event.preventDefault();
|
||||
this.toggle();
|
||||
break;
|
||||
case 37:
|
||||
event.preventDefault();
|
||||
this.audio.currentTime = this.audio.currentTime -5;
|
||||
break;
|
||||
case 39:
|
||||
event.preventDefault();
|
||||
this.audio.currentTime = this.audio.currentTime + 5;
|
||||
break;
|
||||
case 38:
|
||||
event.preventDefault();
|
||||
percentage = this.audio.volume + 0.1;
|
||||
percentage = percentage > 0 ? percentage : 0;
|
||||
percentage = percentage < 1 ? percentage : 1;
|
||||
this.updateBar('volume', percentage, 'width');
|
||||
this.audio.volume = percentage;
|
||||
if (this.audio.muted) {
|
||||
this.audio.muted = false;
|
||||
}
|
||||
switchVolumeIcon();
|
||||
break;
|
||||
case 40:
|
||||
event.preventDefault();
|
||||
percentage = this.audio.volume - 0.1;
|
||||
percentage = percentage > 0 ? percentage : 0;
|
||||
percentage = percentage < 1 ? percentage : 1;
|
||||
this.updateBar('volume', percentage, 'width');
|
||||
this.audio.volume = percentage;
|
||||
if (this.audio.muted) {
|
||||
this.audio.muted = false;
|
||||
}
|
||||
switchVolumeIcon();
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
@ -1210,22 +1212,24 @@ class DPlayer {
|
||||
mask.addEventListener('click', () => {
|
||||
mask.classList.remove('dplayer-mask-show');
|
||||
this.menu.classList.remove('dplayer-menu-show');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Screenshot
|
||||
*/
|
||||
const camareIcon = this.element.getElementsByClassName('dplayer-camera-icon')[0];
|
||||
camareIcon.addEventListener('click', () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = this.audio.videoWidth;
|
||||
canvas.height = this.audio.videoHeight;
|
||||
canvas.getContext('2d').drawImage(this.audio, 0, 0, canvas.width, canvas.height);
|
||||
if (this.option.screenshot) {
|
||||
const camareIcon = this.element.getElementsByClassName('dplayer-camera-icon')[0];
|
||||
camareIcon.addEventListener('click', () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = this.audio.videoWidth;
|
||||
canvas.height = this.audio.videoHeight;
|
||||
canvas.getContext('2d').drawImage(this.audio, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
camareIcon.href = canvas.toDataURL();
|
||||
camareIcon.download = "Screenshot_from_DPlayer.png";
|
||||
});
|
||||
camareIcon.href = canvas.toDataURL();
|
||||
camareIcon.download = "Screenshot_from_DPlayer.png";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user