videojs replaceFullscreen

replaceFullscreen.js

/**
 * 设置指定元素全屏
 * @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 };