js 视频全屏加字

视频自带的全屏处于最顶层，字会被挡在后面 使用div包裹视频，让视频的宽高100% 使得和div宽高一样， 通过js api 调用全屏，是div全屏，字放在div里面就可以在全屏的时候给视频加字了

代码

    const isFullScreenBtn = ref(true)//全屏按钮

    const playerLive = ref(null)//包裹视频的div
    //全屏函数
    const handleFull = () => {
      if (playerLive.value.requestFullscreen) {
        isFullScreenBtn.value = false
        return playerLive.value.requestFullscreen();
      } else if (playerLive.value.webkitRequestFullScreen) {
        isFullScreenBtn.value = false
        return playerLive.value.webkitRequestFullScreen();
      } else if (playerLive.value.mozRequestFullScreen) {
        isFullScreenBtn.value = false
        return playerLive.value.mozRequestFullScreen();
      } else if(playerLive.value.msRequestFullscreen) {
        isFullScreenBtn.value = false
        playerLive.value.msRequestFullscreen();
      }
    }
    // 退出全屏
    const handleExtFull = () => {
      if(document.exitFullScreen) {
        isFullScreenBtn.value = true
        document.exitFullScreen();
      } else if(document.mozCancelFullScreen) {
        isFullScreenBtn.value = true
        document.mozCancelFullScreen();
      } else if(document.webkitExitFullscreen) {
        isFullScreenBtn.value = true
        document.webkitExitFullscreen();
      } else if(document.msExitFullscreen) {
        isFullScreenBtn.value = true
        document.msExitFullscreen();
      }
    }
    const exitHandler = ()=> {
        if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            console.log('退出了全屏')
            handleExtFull()
        }
    }
    // 监听如果按了esc退出全屏就调用退出全屏
    onMounted(()=>{
      document.addEventListener('webkitfullscreenchange', exitHandler, false);
      document.addEventListener('mozfullscreenchange', exitHandler, false);
      document.addEventListener('fullscreenchange', exitHandler, false);
      document.addEventListener('MSFullscreenChange', exitHandler, false);
    })
    onUnmounted(()=>{
      document.removeEventListener('webkitfullscreenchange', exitHandler);
      document.removeEventListener('mozfullscreenchange', exitHandler);
      document.removeEventListener('fullscreenchange', exitHandler);
      document.removeEventListener('MSFullscreenChange', exitHandler);
    })