xiaoxue_admin
/
DPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fullscreen module; web fullscreen event

This commit is contained in:
DIYgod 2017-09-10 01:10:27 +08:00
parent e6652554cc
commit 0bad7b7aed
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
7 changed files with 100 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.html
View File

@ -117,7 +117,7 @@
'quality_start', 'quality_end',
'destroy',
'resize',
'fullscreen', 'fullscreen_cancel'
'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
];
var eventsEle = document.getElementById('events');
for (let i = 0; i < events.length; i++) {

2
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.9.0",
"version": "1.9.1",
"description": "Wow, such a lovely HTML5 danmaku video player",
"main": "dist/DPlayer.min.js",
"style": "dist/DPlayer.min.css",

59
src/DPlayer.js
View File

@ -8,6 +8,7 @@ import html from './html';
import Danmaku from './danmaku';
import Thumbnails from './thumbnails';
import Events from './events';
import FullScreen from './fullscreen';
let index = 0;
@ -599,61 +600,16 @@ class DPlayer {
commentSendIcon.addEventListener('click', sendComment);
this.fullScreen = new FullScreen(this);
/**
* full screen
*/
this.element.addEventListener('fullscreenchange', () => {
this.resize();
});
this.element.addEventListener('mozfullscreenchange', () => {
this.resize();
});
this.element.addEventListener('webkitfullscreenchange', () => {
this.resize();
});
// browser full screen
this.element.getElementsByClassName('dplayer-full-icon')[0].addEventListener('click', () => {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
if (this.element.requestFullscreen) {
this.element.requestFullscreen();
}
else if (this.element.mozRequestFullScreen) {
this.element.mozRequestFullScreen();
}
else if (this.element.webkitRequestFullscreen) {
this.element.webkitRequestFullscreen();
}
else if (this.video.webkitEnterFullscreen) { // Safari for iOS
this.video.webkitEnterFullscreen();
}
this.events.trigger('fullscreen');
}
else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
this.events.trigger('fullscreen_cancel');
}
this.resize();
this.fullScreen.toggle('browser');
});
// web full screen
this.element.getElementsByClassName('dplayer-full-in-icon')[0].addEventListener('click', () => {
if (this.element.classList.contains('dplayer-fulled')) {
this.element.classList.remove('dplayer-fulled');
}
else {
this.element.classList.add('dplayer-fulled');
this.resize();
}
this.fullScreen.toggle('web');
});
/**
@ -702,9 +658,8 @@ class DPlayer {
const event = e || window.event;
switch (event.keyCode) {
case 27:
if (this.element.classList.contains('dplayer-fulled')) {
this.element.classList.remove('dplayer-fulled');
this.resize();
if (this.fullScreen.isFullScreen('web')) {
this.fullScreen.cancel('web');
}
break;
}

2
src/events.js
View File

@ -18,7 +18,7 @@ class Events {
'quality_start', 'quality_end',
'destroy',
'resize',
'fullscreen', 'fullscreen_cancel'
'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
];
}

88
src/fullscreen.js Normal file
View File

@ -0,0 +1,88 @@
class FullScreen {
constructor (player) {
this.player = player;
this.player.events.on('webfullscreen', () => {
this.player.resize();
});
this.player.events.on('webfullscreen_cancel', () => {
this.player.resize();
});
const fullscreenchange = () => {
this.player.resize();
if (this.isFullScreen('browser')) {
this.player.events.trigger('fullscreen');
}
else {
this.player.events.trigger('fullscreen_cancel');
}
};
this.player.element.addEventListener('fullscreenchange', fullscreenchange);
this.player.element.addEventListener('mozfullscreenchange', fullscreenchange);
this.player.element.addEventListener('webkitfullscreenchange', fullscreenchange);
}
isFullScreen (type = 'browser') {
switch (type) {
case 'browser':
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
case 'web':
return this.player.element.classList.contains('dplayer-fulled');
}
}
request (type = 'browser') {
switch (type) {
case 'browser':
if (this.player.element.requestFullscreen) {
this.player.element.requestFullscreen();
}
else if (this.player.element.mozRequestFullScreen) {
this.player.element.mozRequestFullScreen();
}
else if (this.player.element.webkitRequestFullscreen) {
this.player.element.webkitRequestFullscreen();
}
else if (this.player.video.webkitEnterFullscreen) { // Safari for iOS
this.player.video.webkitEnterFullscreen();
}
break;
case 'web':
this.player.element.classList.add('dplayer-fulled');
this.player.events.trigger('webfullscreen');
break;
}
}
cancel (type = 'browser') {
switch (type) {
case 'browser':
if (document.cancelFullScreen) {
document.cancelFullScreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
break;
case 'web':
this.player.element.classList.remove('dplayer-fulled');
this.player.events.trigger('webfullscreen_cancel');
break;
}
}
toggle (type = 'browser') {
if (this.isFullScreen(type)) {
this.cancel(type);
}
else {
this.request(type);
}
}
}
module.exports = FullScreen;