答案：通过HTML video标签和JavaScript全屏API实现视频全屏播放。1. 使用video标签定义视频并添加全屏按钮；2. 用JavaScript调用requestFullscreen方法，兼容不同浏览器前缀；3. 可选exitFullscreen退出全屏；4. 全屏需用户触发，移动端支持有限。
要在HTML中实现视频全屏播放，主要通过<video>标签结合JavaScript的全屏API来完成。现代浏览器普遍支持Fullscreen API，可以控制元素进入或退出全屏模式。
1. 基础HTML视频标签
先定义一个带有播放控件的视频元素，包含全屏按钮：
<video id="myVideo" width="640" controls><source src="example.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<button onclick="openFullscreen()">全屏播放</button>
2. 使用JavaScript调用全屏API
通过JavaScript获取视频元素，并调用全屏方法：
<script>var 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();
}
}
</script>
3. 退出全屏功能（可选）
你也可以添加退出全屏的功能：
立即学习“前端免费学习笔记（深入）”；
<button onclick="exitFullscreen()">退出全屏</button><script>
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();
}
}
</script>
4. 注意事项
全屏功能有一些使用限制：
- 必须由用户操作（如点击按钮）触发，不能自动全屏
- 部分移动端浏览器对全屏API支持有限，可能默认全屏播放
- 不同浏览器前缀不同，建议做兼容性处理
- 某些浏览器会显示全屏提示栏，用户可手动退出
基本上就这些。只要按标准写法加上兼容处理，就能在大多数现代浏览器中实现视频全屏播放功能。
