html5怎么设置视频全屏_HTML5全屏API与视频控件扩展

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html5怎么设置视频全屏_HTML5全屏API与视频控件扩展

2025-11-07

浏览次数：次

返回列表

通过HTML5的video标签和全屏API可实现视频播放与全屏功能，首先使用video标签嵌入视频并设置controls属性提供基础控制，通过J*aScript调用requestFullscreen方法实现元素全屏显示，并处理不同浏览器前缀兼容性问题，同时可绑定按钮触发全屏与退出操作，结合fullscreenchange事件监听全屏状态以更新UI，进一步可移除默认控件并构建自定义播放界面提升用户体验。

html5怎么设置视频全屏_html5全屏api与视频控件扩展

HTML5 提供了原生支持视频播放和全屏显示的能力，通过标签和全屏 API 可以实现视频的播放控制与全屏功能。下面详细介绍如何设置视频全屏播放，并扩展视频控件以提升用户体验。

使用 video 标签基础播放视频

在 HTML5 中，使用标签可以嵌入视频文件。默认情况下，浏览器会提供基础控件（如播放、暂停、音量），也可以自定义这些控件。

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

其中 controls 属性用于显示默认控件，id 便于后续 J*aScript 操作。

调用全屏 API 实现全屏播放

HTML5 全屏 API 允许元素（如 video）进入全屏模式。由于浏览器兼容性问题，需处理不同前缀。

通过 J*aScript 调用全屏方法：

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>

退出全屏状态

可通过 document.exitFullscreen() 方法退出全屏：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

277 查看详情火龙果写作

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

注意：全屏状态改变时，可监听 fullscreenchange 事件来更新 UI 状态。

扩展自定义视频控件

隐藏默认 controls 后，可创建自定义播放按钮、进度条、音量滑块等。

示例：添加自定义全屏按钮并控制样式

<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>