HTML5视频全屏设置方法详解

<video id="myVideo" controls width="640" height="360">
  <source src="example.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

const video = document.getElementById('myVideo');

function openFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { // Firefox
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { // IE/Edge
    video.msRequestFullscreen();
  }
}

<button onclick="openFullscreen()">全屏播放</button>

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();
  }
}

<div class="video-container">
  <video id="myVideo" width="640" height="360">
    <source src="example.mp4" type="video/mp4">
  </video>
  <button id="fullscreenBtn">⛶ 进入全屏</button>
</div>

<script>
  const video = document.getElementById('myVideo');
  const btn = document.getElementById('fullscreenBtn');

  btn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      video.requestFullscreen().then(() => {
        btn.textContent = '⛶ 退出全屏';
      }).catch(err => {
        alert(`无法进入全屏: ${err.message}`);
      });
    } else {
      document.exitFullscreen();
      btn.textContent = '⛶ 进入全屏';
    }
  });
</script>