点击下载教程相关资源
浏览器全屏指将播放器填充满浏览器。
在 Video.js 中，可以使用不带参数的 isFullscreen() 函数检查播放器当前是否为全屏，使用带有参数的 isFullscreen() 函数可以设置全屏/退出全屏，例如：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<div id="container">
<video id="vid1"
data-setup='{"preload":"auto","controls":true,"width":"640","height":"264px",
"poster":"../resources/oceans.jpg"}'>
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video>
</div>
<p style="position: absolute;top:10px;left:10px;">
<button onclick="setFullScreen()">进入/退出全屏</button>
</p>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
let player = videojs('vid1');
function setFullScreen() {
// 设置静音状态
player.isFullscreen(!player.isFullscreen());
}
</script>
</body>
</html>运行示例，效果图：
屏幕全屏指将播放器占满整个屏幕，即使浏览器没有占满屏幕。
在 Video.js 中，可以通过 requestFullscreen() 方法请求播放器进入全屏，使用 exitFullscreen() 方法退出全屏，例如：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<div id="container">
<video id="vid1"
data-setup='{"preload":"auto","controls":true,"width":"640","height":"264px",
"poster":"../resources/oceans.jpg"}'>
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video>
</div>
<p style="position: absolute;top:10px;left:10px;">
<button onclick="enterFullScreen()">进入全屏</button>
</p>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
let player = videojs('vid1');
function enterFullScreen() {
// 进入全屏
player.requestFullscreen();
// 3秒后自动退出全屏
setTimeout(function(){
player.exitFullscreen();
}, 3000);
}
</script>
</body>
</html>
川公网安备51010802032098