在html5页面中实现视频全屏是前端开发中常见的需求，目前主流的实现方式有两种，分别是通过requestFullscreen API编程控制全屏，以及使用浏览器自带的F11快捷键触发全屏，两种方式各有适用的场景。
一、通过F11快捷键实现全屏
F11是浏览器内置的全屏快捷键，按下后会触发浏览器全局全屏模式，整个浏览器窗口都会进入全屏状态，当前页面内的视频也会随之全屏展示。这种方式不需要开发者编写额外的代码，完全依赖浏览器的原生能力。
不过F11全屏的局限性比较明显，它会覆盖整个页面，不仅是视频区域，页面上的其他所有元素都会进入全屏状态，无法单独控制只有视频全屏。同时F11全屏不能通过代码自动触发，必须由用户手动按下快捷键，浏览器出于安全考虑禁止了脚本自动触发F11全屏的行为。
二、使用requestFullscreen API实现视频全屏
requestFullscreen API是html5提供的原生全屏接口，可以让指定元素进入全屏状态，非常适合实现单独视频全屏的需求。该API支持大部分现代浏览器，不同浏览器内核需要添加对应的前缀兼容。
1. 基础实现代码
首先在页面中添加一个video元素和一个触发全屏的按钮，然后通过按钮点击事件调用全屏方法：
<!-- 视频元素 -->
<video id="targetVideo" src="test.mp4" controls width="600"></video>
<!-- 全屏按钮 -->
<button id="fullscreenBtn">点击视频全屏</button>
<script>
// 获取视频元素和按钮元素
const video = document.getElementById('targetVideo');
const btn = document.getElementById('fullscreenBtn');
// 点击按钮触发全屏
btn.addEventListener('click', () => {
// 判断视频元素是否支持requestFullscreen
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) { // 兼容webkit内核浏览器
video.webkitRequestFullscreen();
} else if (video.mozRequestFullScreen) { // 兼容火狐浏览器
video.mozRequestFullScreen();
} else if (video.msRequestFullscreen) { // 兼容IE/Edge
video.msRequestFullscreen();
} else {
alert('当前浏览器不支持视频全屏功能');
}
});
</script>
2. 退出全屏的实现
进入全屏后，用户可以通过按ESC键退出全屏，也可以添加自定义按钮通过代码退出全屏，退出全屏需要调用document对象的退出全屏方法：
// 退出全屏的方法
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// 可以给页面添加ESC之外的退出按钮
const exitBtn = document.createElement('button');
exitBtn.innerText = '退出全屏';
exitBtn.addEventListener('click', exitFullscreen);
document.body.appendChild(exitBtn);
3. 全屏状态监听
可以通过监听fullscreenchange事件来获取当前全屏状态的变化，方便在全屏进入或退出时执行对应的逻辑：
// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
const isFullscreen = document.fullscreenElement !== null;
if (isFullscreen) {
console.log('当前处于全屏状态');
} else {
console.log('已退出全屏状态');
}
});
// 兼容webkit内核的监听
document.addEventListener('webkitfullscreenchange', () => {
const isFullscreen = document.webkitFullscreenElement !== null;
console.log('全屏状态变化:', isFullscreen);
});
三、两种全屏方式的对比
我们可以通过下面的表格清晰看到两种全屏方式的差异：
| 对比项 | F11全屏 | requestFullscreen API全屏 |
|---|---|---|
| 触发方式 | 用户手动按F11快捷键 | 代码调用接口，支持用户点击按钮触发 |
| 全屏范围 | 整个浏览器页面全屏 | 仅指定的视频元素全屏 |
| 自动触发 | 不支持，浏览器禁止脚本触发 | 支持，但必须在用户交互事件（如点击）中调用 |
| 兼容性 | 所有支持全屏的浏览器都支持 | 现代浏览器基本支持，旧版浏览器需要加前缀 |
四、注意事项
- requestFullscreen API必须在用户交互事件中调用，比如click、touchstart事件，不能在页面加载完成后自动调用，否则浏览器会拦截并报错。
- 不同浏览器对全屏API的前缀支持不同，实际开发中需要做好兼容性处理，避免部分浏览器无法使用全屏功能。
- 进入全屏后，浏览器默认会隐藏页面的其他元素，只展示全屏的目标元素，如果需要全屏时显示自定义控制栏，需要自己编写对应的样式和逻辑。
- 部分移动端浏览器对requestFullscreen API的支持有限，在移动端实现视频全屏可能需要调用视频元素自带的
webkitEnterFullscreen方法，该方法不需要前缀兼容，直接在video元素上调用即可。
// 移动端视频全屏兼容写法
function mobileVideoFullscreen(videoElement) {
if (videoElement.webkitEnterFullscreen) {
videoElement.webkitEnterFullscreen();
} else {
// 降级使用requestFullscreen
if (videoElement.requestFullscreen) {
videoElement.requestFullscreen();
}
}
}
html5_videorequestFullscreen_APIF11_fullscreen全屏实现修改时间：2026-06-14 20:09:14