上一篇
html5 视频如何全屏播放
HTML5 中，可通过设置 ` 标签的 webkit-playsinline` 属性并使用 JavaScript 的
HTML5中，实现视频全屏播放有多种方法,以下是详细介绍：
使用全屏API
HTML5提供了全屏API，可让视频元素或其父元素进入全屏模式，不同浏览器对全屏方法的支持有所不同,需进行兼容性处理。
| 浏览器 | 全屏方法 |
|---|---|
| Chrome、Safari等WebKit内核浏览器 | webkitRequestFullscreen() |
| Firefox | mozRequestFullScreen() |
| IE/Edge | msRequestFullscreen() |
| 标准方法（现代浏览器） | requestFullscreen() |
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8">HTML5 Video Fullscreen Example</title> <style> #myVideo { width: 100%; height: auto; } </style> </head> <body> <video id="myVideo" src="video.mp4"></video> <script> var video = document.getElementById("myVideo"); video.addEventListener("click", function () { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); } }); </script> </body> </html>
通过CSS设置视频尺寸
可通过CSS将视频宽度设置为100%，高度自动适应,使其在父容器中全屏显示。
示例代码：
使用object-fit属性
object-fit属性可控制视频内容在容器中的填充方式,常用于保持视频比例的同时实现全屏效果。
| 值 | 说明 |
|---|---|
| fill | 默认值，拉伸填充整个容器，不保持比例 |
| contain | 保持比例，确保视频完全显示在容器内 |
| cover | 保持比例，裁剪部分视频以填满容器 |
| none | 保持原始比例和尺寸 |
| scale-down | 类似none或contain，选择较小尺寸显示 |
示例代码：
#myVideo { width: 100%; height: 100%; object-fit: cover; object-position: center; }
响应式布局实现全屏
结合媒体查询和百分比布局,可使视频在不同设备上自适应全屏。
示例代码：
JavaScript动态调整尺寸
通过JS获取浏览器宽高，动态设置视频尺寸,适用于WebView等场景。
示例代码：
function resizeVideo() { var video = document.getElementById("myVideo"); video.style.width = window.innerWidth + "px"; video.style.height = window.innerHeight + "px"; } window.onload = resizeVideo; window.onresize = resizeVideo;
移动端全屏处理
在移动端（如iPhone），可直接播放全屏，若需退出全屏,可用两指缩小手势。
注意事项：
- 部分移动端浏览器（如Safari）需添加playsinline和webkit-playsinline属性,防止视频跳转到系统播放器。
- Android部分版本默认全屏,可通过CSS或JS调整。
退出全屏方法
调用exitFullscreen()方法或按Esc键可退出全屏。
示例代码：
document.getElementById("myVideo").exitFullscreen();
兼容性处理
为兼容不同浏览器,可封装全屏请求函数。
示例代码：
function fullScreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } }
FAQs
Q1：如何让视频点击后全屏播放？
A1：为视频元素添加点击事件监听器，调用全屏API即可。
video.addEventListener("click", function() { video.requestFullscreen(); });
Q2：移动端视频全屏后如何退出？
A2：在iOS上,用两指缩小手势可退出全屏；
