From 5be01ad19f500ad6e244e8159deae071e720b72e Mon Sep 17 00:00:00 2001 From: xiaozhengdong Date: Tue, 12 Jan 2021 10:33:13 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E9=94=80=E6=AF=81=E6=92=AD=E6=94=BE?= =?UTF-8?q?=E5=99=A8=E6=97=B6=E7=A7=BB=E9=99=A4=E7=BB=91=E5=AE=9A=E7=9A=84?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6,=E9=81=BF=E5=85=8D=E5=86=85=E5=AD=98?= =?UTF-8?q?=E6=B3=84=E6=BC=8F;video=E6=A0=87=E7=AD=BEcontextmenu=E5=8E=9F?= =?UTF-8?q?=E7=94=9F=E4=BA=8B=E4=BB=B6=E9=98=BB=E6=AD=A2=E6=9C=89=E6=BC=8F?= =?UTF-8?q?=E6=8E=89=E7=9A=84=E6=83=85=E5=86=B5;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/guide.md | 12 ++--- docs/zh/guide.md | 14 ++--- src/js/contextmenu.js | 15 ++++-- src/js/controller.js | 21 ++++---- src/js/danmaku.js | 8 +-- src/js/fullscreen.js | 28 +++++++--- src/js/hotkey.js | 118 +++++++++++++++++++++++------------------- src/js/player.js | 28 +++++----- src/js/timer.js | 2 +- 9 files changed, 133 insertions(+), 113 deletions(-) diff --git a/docs/guide.md b/docs/guide.md index 0b9d366..8f1b1e1 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -709,7 +709,7 @@ DPlayer can work with any MSE library via `customType` option. ```js var type = 'normal'; -if(Hls.isSupported() && Hls.WEBRTC_SUPPORT) { +if (Hls.isSupported() && Hls.WEBRTC_SUPPORT) { type = 'customHls'; } const dp = new DPlayer({ @@ -718,19 +718,19 @@ const dp = new DPlayer({ url: 'demo.m3u8', type: type, customType: { - 'customHls': function (video, player) { + customHls: function (video, player) { const hls = new Hls({ debug: false, // Other hlsjsConfig options provided by hls.js p2pConfig: { - live: false, + live: false, // Other p2pConfig options provided by CDNBye http://www.cdnbye.com/en/ - } + }, }); hls.loadSource(video.src); hls.attachMedia(video); - } - } + }, + }, }, }); ``` diff --git a/docs/zh/guide.md b/docs/zh/guide.md index bad09b9..a17081e 100644 --- a/docs/zh/guide.md +++ b/docs/zh/guide.md @@ -683,7 +683,7 @@ const dp = new DPlayer({ ### 配合其他 MSE 库使用 -DPlayer 可以通过 `customType` 参数与任何 MSE 库一起使用，例如支持P2P插件： +DPlayer 可以通过 `customType` 参数与任何 MSE 库一起使用，例如支持 P2P 插件： ```html
@@ -693,7 +693,7 @@ DPlayer 可以通过 `customType` 参数与任何 MSE 库一起使用，例如 ```js var type = 'normal'; -if(Hls.isSupported() && Hls.WEBRTC_SUPPORT) { +if (Hls.isSupported() && Hls.WEBRTC_SUPPORT) { type = 'customHls'; } const dp = new DPlayer({ @@ -702,19 +702,19 @@ const dp = new DPlayer({ url: 'demo.m3u8', type: type, customType: { - 'customHls': function (video, player) { + customHls: function (video, player) { const hls = new Hls({ debug: false, // Other hlsjsConfig options provided by hls.js p2pConfig: { - live: false, // 如果是直播设为true + live: false, // 如果是直播设为true // Other p2pConfig options provided by CDNBye http://www.cdnbye.com/cn/ - } + }, }); hls.loadSource(video.src); hls.attachMedia(video); - } - } + }, + }, }, }); ``` diff --git a/src/js/contextmenu.js b/src/js/contextmenu.js index bac2443..9514ef3 100644 --- a/src/js/contextmenu.js +++ b/src/js/contextmenu.js @@ -12,22 +12,23 @@ class ContextMenu { } }); - this.player.container.addEventListener('contextmenu', (e) => { + this.contextmenuHandler = (e) => { + const event = e || window.event; + event.preventDefault(); + if (this.shown) { this.hide(); return; } - const event = e || window.event; - event.preventDefault(); - const clientRect = this.player.container.getBoundingClientRect(); this.show(event.clientX - clientRect.left, event.clientY - clientRect.top); this.player.template.mask.addEventListener('click', () => { this.hide(); }); - }); + }; + this.player.container.addEventListener('contextmenu', this.contextmenuHandler); } show(x, y) { @@ -62,6 +63,10 @@ class ContextMenu { this.shown = false; this.player.events.trigger('contextmenu_hide'); } + + destroy() { + this.player.container.removeEventListener('contextmenu', this.contextmenuHandler); + } } export default ContextMenu; diff --git a/src/js/controller.js b/src/js/controller.js index cec22f0..a68daba 100644 --- a/src/js/controller.js +++ b/src/js/controller.js @@ -8,18 +8,11 @@ class Controller { this.autoHideTimer = 0; if (!utils.isMobile) { - this.player.container.addEventListener('mousemove', () => { - this.setAutoHide(); - }); - this.player.container.addEventListener('click', () => { - this.setAutoHide(); - }); - this.player.on('play', () => { - this.setAutoHide(); - }); - this.player.on('pause', () => { - this.setAutoHide(); - }); + this.setAutoHideHandler = this.setAutoHide.bind(this); + this.player.container.addEventListener('mousemove', this.setAutoHideHandler); + this.player.container.addEventListener('click', this.setAutoHideHandler); + this.player.on('play', this.setAutoHideHandler); + this.player.on('pause', this.setAutoHideHandler); } this.initPlayButton(); @@ -331,6 +324,10 @@ class Controller { } destroy() { + if (!utils.isMobile) { + this.player.container.removeEventListener('mousemove', this.setAutoHideHandler); + this.player.container.removeEventListener('click', this.setAutoHideHandler); + } clearTimeout(this.autoHideTimer); } } diff --git a/src/js/danmaku.js b/src/js/danmaku.js index 029f4c9..537b4ba 100644 --- a/src/js/danmaku.js +++ b/src/js/danmaku.js @@ -307,13 +307,7 @@ class Danmaku { } htmlEncode(str) { - return str - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/'/g, ''') - .replace(/\//g, '/'); + return str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g, '/'); } resize() { diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 4c8c126..ce76ce0 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -12,7 +12,7 @@ class FullScreen { utils.setScrollPosition(this.lastScrollPosition); }); - const fullscreenchange = () => { + this.fullscreenchange = () => { this.player.resize(); if (this.isFullScreen('browser')) { this.player.events.trigger('fullscreen'); @@ -21,7 +21,7 @@ class FullScreen { this.player.events.trigger('fullscreen_cancel'); } }; - const docfullscreenchange = () => { + this.docfullscreenchange = () => { const fullEle = document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; if (fullEle && fullEle !== this.player.container) { return; @@ -35,13 +35,13 @@ class FullScreen { } }; if (/Firefox/.test(navigator.userAgent)) { - document.addEventListener('mozfullscreenchange', docfullscreenchange); - document.addEventListener('fullscreenchange', docfullscreenchange); + document.addEventListener('mozfullscreenchange', this.docfullscreenchange); + document.addEventListener('fullscreenchange', this.docfullscreenchange); } else { - this.player.container.addEventListener('fullscreenchange', fullscreenchange); - this.player.container.addEventListener('webkitfullscreenchange', fullscreenchange); - document.addEventListener('msfullscreenchange', docfullscreenchange); - document.addEventListener('MSFullscreenChange', docfullscreenchange); + this.player.container.addEventListener('fullscreenchange', this.fullscreenchange); + this.player.container.addEventListener('webkitfullscreenchange', this.fullscreenchange); + document.addEventListener('msfullscreenchange', this.docfullscreenchange); + document.addEventListener('MSFullscreenChange', this.docfullscreenchange); } } @@ -122,6 +122,18 @@ class FullScreen { this.request(type); } } + + destroy() { + if (/Firefox/.test(navigator.userAgent)) { + document.removeEventListener('mozfullscreenchange', this.docfullscreenchange); + document.removeEventListener('fullscreenchange', this.docfullscreenchange); + } else { + this.player.container.removeEventListener('fullscreenchange', this.fullscreenchange); + this.player.container.removeEventListener('webkitfullscreenchange', this.fullscreenchange); + document.removeEventListener('msfullscreenchange', this.docfullscreenchange); + document.removeEventListener('MSFullscreenChange', this.docfullscreenchange); + } + } } export default FullScreen; diff --git a/src/js/hotkey.js b/src/js/hotkey.js index e383a5a..f77c111 100644 --- a/src/js/hotkey.js +++ b/src/js/hotkey.js @@ -1,60 +1,74 @@ class HotKey { constructor(player) { - if (player.options.hotkey) { - document.addEventListener('keydown', (e) => { - if (player.focus) { - const tag = document.activeElement.tagName.toUpperCase(); - const editable = document.activeElement.getAttribute('contenteditable'); - if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') { - const event = e || window.event; - let percentage; - switch (event.keyCode) { - case 32: - event.preventDefault(); - player.toggle(); - break; - case 37: - event.preventDefault(); - if (player.options.live) { - break; - } - player.seek(player.video.currentTime - 5); - player.controller.setAutoHide(); - break; - case 39: - event.preventDefault(); - if (player.options.live) { - break; - } - player.seek(player.video.currentTime + 5); - player.controller.setAutoHide(); - break; - case 38: - event.preventDefault(); - percentage = player.volume() + 0.1; - player.volume(percentage); - break; - case 40: - event.preventDefault(); - percentage = player.volume() - 0.1; - player.volume(percentage); - break; - } - } - } - }); + this.player = player; + this.doHotKeyHandler = this.doHotKey.bind(this); + this.cancelFullScreenHandler = this.cancelFullScreen.bind(this); + if (this.player.options.hotkey) { + document.addEventListener('keydown', this.doHotKeyHandler); } - document.addEventListener('keydown', (e) => { - const event = e || window.event; - switch (event.keyCode) { - case 27: - if (player.fullScreen.isFullScreen('web')) { - player.fullScreen.cancel('web'); - } - break; + document.addEventListener('keydown', this.cancelFullScreenHandler); + } + + doHotKey(e) { + if (this.player.focus) { + const tag = document.activeElement.tagName.toUpperCase(); + const editable = document.activeElement.getAttribute('contenteditable'); + if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') { + const event = e || window.event; + let percentage; + switch (event.keyCode) { + case 32: + event.preventDefault(); + this.player.toggle(); + break; + case 37: + event.preventDefault(); + if (this.player.options.live) { + break; + } + this.player.seek(this.player.video.currentTime - 5); + this.player.controller.setAutoHide(); + break; + case 39: + event.preventDefault(); + if (this.player.options.live) { + break; + } + this.player.seek(this.player.video.currentTime + 5); + this.player.controller.setAutoHide(); + break; + case 38: + event.preventDefault(); + percentage = this.player.volume() + 0.1; + this.player.volume(percentage); + break; + case 40: + event.preventDefault(); + percentage = this.player.volume() - 0.1; + this.player.volume(percentage); + break; + } } - }); + } + } + + cancelFullScreen(e) { + const event = e || window.event; + switch (event.keyCode) { + case 27: + if (this.player.fullScreen.isFullScreen('web')) { + this.player.fullScreen.cancel('web'); + } + break; + } + } + + destroy() { + if (this.player.options.hotkey) { + document.removeEventListener('keydown', this.doHotKeyHandler); + } + document.removeEventListener('keydown', this.cancelFullScreenHandler); } } diff --git a/src/js/player.js b/src/js/player.js index eb4bc85..db79189 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -116,21 +116,14 @@ class DPlayer { this.setting = new Setting(this); this.plugins = {}; - - document.addEventListener( - 'click', - () => { - this.focus = false; - }, - true - ); - this.container.addEventListener( - 'click', - () => { - this.focus = true; - }, - true - ); + this.docClickFun = () => { + this.focus = false; + }; + this.containerClickFun = () => { + this.focus = true; + }; + document.addEventListener('click', this.docClickFun, true); + this.container.addEventListener('click', this.containerClickFun, true); this.paused = true; @@ -608,6 +601,11 @@ class DPlayer { destroy() { instances.splice(instances.indexOf(this), 1); this.pause(); + document.removeEventListener('click', this.docClickFun, true); + this.container.removeEventListener('click', this.containerClickFun, true); + this.fullScreen.destroy(); + this.hotkey.destroy(); + this.contextmenu.destroy(); this.controller.destroy(); this.timer.destroy(); this.video.src = ''; diff --git a/src/js/timer.js b/src/js/timer.js index bef0432..02f1469 100644 --- a/src/js/timer.js +++ b/src/js/timer.js @@ -8,7 +8,7 @@ class Timer { window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || - function(callback) { + function (callback) { window.setTimeout(callback, 1000 / 60); })();