浏览器中视频播放器的全屏方案

// 进入全屏
function getFullscreen(el = this.config.fullscreenTarget) {
  // ......
  const GET_FULLSCREEN_API = ['requestFullscreen', 'webkitRequestFullscreen', 'mozRequestFullScreen', 'msRequestFullscreen']
  try {
    for (let i = 0; i < GET_FULLSCREEN_API.length; i++) {
      const key = GET_FULLSCREEN_API[i]
      if (el[key]) {
        const ret =
          key === 'webkitRequestFullscreen'
            ? el.webkitRequestFullscreen(window.Element.ALLOW_KEYBOARD_INPUT)
            : el[key]()
        if (ret && ret.then) {
          return ret
        } else {
          return Promise.resolve()
        }
      }
    }
    return Promise.reject(new Error('call getFullscreen fail'))
  } catch (err) {
    return Promise.reject(new Error('call getFullscreen fail'))
  }
}

// 退出全屏
function exitFullscreen(el) {
  // ......
  const EXIT_FULLSCREEN_API = ['exitFullscreen', 'webkitExitFullscreen', 'mozCancelFullScreen', 'msExitFullscreen']
  try {
    for (let i = 0; i < EXIT_FULLSCREEN_API.length; i++) {
      const key = EXIT_FULLSCREEN_API[i]
      if (document[key]) {
        const ret = document[key]()
        if (ret && ret.then) {
          ret.catch(() => {
          })
          return ret
        } else {
          return Promise.resolve()
        }
      }
    }
    return Promise.reject(new Error('call exitFullscreen fail'))
  } catch (err) {
    return Promise.reject(new Error('call exitFullscreen fail'))
  }
}

export async function requestFullscreen(container: HTMLElement | null, media: EventTarget) {
  const doc = document as WebKitDocument;

  if (container && (doc.fullscreenEnabled || doc.webkitFullscreenEnabled)) {
    const el = container as WebKitFullscreenElement;

    if (isFunction(el.requestFullscreen)) {
      return el.requestFullscreen();
    }

    if (isFunction(el.webkitRequestFullscreen)) {
      return el.webkitRequestFullscreen();
    }
  }

  const webkitVideo = media as WebKitVideoElement;
  if (isFunction(webkitVideo.webkitSetPresentationMode)) {
    webkitVideo.webkitSetPresentationMode('fullscreen');
    return;
  }

  const video = media as unknown as MediaFullscreenCapability;
  if (isFunction(video.requestFullscreen)) {
    return video.requestFullscreen() as Promise<void>;
  }
}

export async function exitFullscreen(media: EventTarget) {
  const doc = document as WebKitDocument;

  const webkitVideo = media as WebKitVideoElement;
  if (webkitVideo.webkitPresentationMode === 'fullscreen' && isFunction(webkitVideo.webkitSetPresentationMode)) {
    webkitVideo.webkitSetPresentationMode('inline');
    return;
  }

  if (isFunction(doc.exitFullscreen)) {
    return doc.exitFullscreen();
  }

  if (isFunction(doc.webkitExitFullscreen)) {
    return doc.webkitExitFullscreen();
  }

  const video = media as unknown as MediaFullscreenCapability;
  if (isFunction(video.exitFullscreen)) {
    return video.exitFullscreen() as Promise<void>;
  }
}