Last active
July 13, 2021 13:51
-
-
Save cyio/a838a85a87c14257427babd3ecf828e6 to your computer and use it in GitHub Desktop.
videojs replaceFullscreen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 设置指定元素全屏 | |
* @param {dom} ele | |
*/ | |
function fullScreen(ele) { | |
const el = ele || document.documentElement; | |
const rfs = | |
el.requestFullscreen || | |
el.webkitRequestFullScreen || | |
el.mozRequestFullScreen || | |
el.msRequestFullScreen; | |
if (rfs) { | |
rfs.call(el); | |
} else if (window.ActiveXObject) { | |
// for Internet Explorer | |
// eslint-disable-next-line no-undef | |
const wscript = new ActiveXObject('WScript.Shell'); | |
if (wscript != null) { | |
wscript.SendKeys('{F11}'); | |
} | |
} | |
} | |
/** | |
* 设置指定元素退出全屏 | |
*/ | |
function exitFullScreen() { | |
const fullscreenElement = | |
document.fullscreenElement || | |
document.webkitFullscreenElement || | |
document.mozFullScreenElement /* Old Chrome, Safari and Opera syntax */ || | |
document.msFullscreenElement; | |
if (!fullscreenElement) return; // 全屏元素不存在 | |
const el = document; | |
const cfs = | |
el.exitFullscreen || el.mozCancelFullScreen || el.webkitCancelFullScreen; | |
if (cfs) { | |
cfs.call(el); | |
} else if (window.ActiveXObject) { | |
// for Internet Explorer | |
// eslint-disable-next-line no-undef | |
const wscript = new ActiveXObject('WScript.Shell'); | |
if (wscript != null) { | |
wscript.SendKeys('{F11}'); | |
} | |
} | |
} | |
/* | |
* 指定元素切换全屏,并增加 CSS 类标识 | |
* @param {String} el: 全屏元素 | |
*/ | |
function customFullscreenToggle(el) { | |
const elNode = document.querySelector(el); | |
const fullscreenElement = | |
document.fullscreenElement || | |
document.webkitFullscreenElement || | |
document.mozFullScreenElement /* Old Chrome, Safari and Opera syntax */ || | |
document.msFullscreenElement; | |
if (fullscreenElement) { | |
exitFullScreen(); | |
elNode.classList.remove('is-fullscreen'); | |
document.querySelector('.video-js').classList.remove('vjs-fullscreen'); | |
} else { | |
fullScreen(elNode); | |
elNode.classList.add('is-fullscreen'); | |
document.querySelector('.video-js').classList.add('vjs-fullscreen'); | |
} | |
} | |
/* | |
* 替换 videojs 播放器的全屏切换功能 | |
* player: 播放器实例 | |
* @param {String} commonParentEl: 播放器和前置元素的公共容器节点 | |
*/ | |
function replaceFullscreen(player, commonParentEl) { | |
if (document.querySelector(commonParentEl) === null) return; | |
player.controlBar.fullscreenToggle.off('click'); // 全屏按钮事件卸载 | |
// 播放器界面双击事件卸载 | |
player.tech_.off('dblclick'); // eslint-disable-line | |
document | |
.querySelector('.vjs-fullscreen-control') | |
.addEventListener('click', () => { | |
customFullscreenToggle(commonParentEl); | |
}); | |
document.querySelector('.video-js').addEventListener('dblclick', () => { | |
customFullscreenToggle(commonParentEl); | |
}); | |
} | |
export { customFullscreenToggle, replaceFullscreen }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment