video全屏播放

video全屏播放：

const elVideo = document.getElementById('video')
setTimeout(() => {
    if (elVideo.requestFullscreen) {
       elVideo.requestFullscreen()
    } else if (elVideo.mozRequestFullScreen) {
       elVideo.mozRequestFullScreen()
    } else if (elVideo.webkitRequestFullScreen) {
       elVideo.webkitRequestFullScreen()
    } else if (elVideo.webkitEnterFullScreen) {
       // Toggle fullscreen in Safari for iPad
        elVideo.webkitEnterFullScreen()
    }
    elVideo.play()
}, 500)

几个问题要注意：

1.注意针对IOS Safari需要使用webkitEnterFullScreen

2.调用play方法时，应该采用setTimeout进行包裹，主要原因如下：

在某些情况下，点击事件和video播放之间需要使用setTimeout间隔才能正常打开播放，可能是由于浏览器的异步处理机制导致的。

当你触发点击事件时，浏览器会立即执行相应的事件处理程序。如果在事件处理程序中有一个video元素的播放操作，浏览器可能会在播放操作之前执行其他的操作，例如更新页面布局或执行其他的JavaScript代码。这可能会导致video元素无法正常播放。

通过使用setTimeout间隔，你可以将video的播放操作延迟到下一个事件循环中执行。这样可以确保在播放视频之前，浏览器已经完成了其他的操作，从而避免了可能的冲突。

需要注意的是，这种情况可能因浏览器和设备而异。不同的浏览器和设备可能有不同的异步处理机制，因此在某些情况下，可能不需要使用setTimeout间隔。

退出全屏：

const videoElement = document.getElementById('myVideo')

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}

全屏播放监听：

  video.addEventListener('fullscreenchange', (event) => {
    if (document.fullscreenElement) {
    // 视频进入全屏模式
      console.log('视频进入全屏模式')
    } else {
    // 视频退出全屏模式
      console.log('视频退出全屏模式')
      video.pause()
    }
  })