当前位置：首页 > 前端开发 > 正文

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%，高度自动适应,使其在父容器中全屏显示。

示例代码：

#myVideo {
    width: 100%;
    height: auto;
}

使用object-fit属性

object-fit属性可控制视频内容在容器中的填充方式,常用于保持视频比例的同时实现全屏效果。

值 说明
fill 默认值，拉伸填充整个容器，不保持比例
contain 保持比例，确保视频完全显示在容器内
cover 保持比例，裁剪部分视频以填满容器
none 保持原始比例和尺寸
scale-down 类似none或contain，选择较小尺寸显示

示例代码：

#myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

响应式布局实现全屏

结合媒体查询和百分比布局,可使视频在不同设备上自适应全屏。

示例代码：

#videoContainer {
    width: 100%;
    height: 100vh; / 视口高度 /
    position: relative;
}
#myVideo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

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上,用两指缩小手势可退出全屏；

ml5 视频 全
0

相关文章