js实现页面视频监控全屏

最新推荐文章于 2025-02-15 10:14:54 发布

天道酬勤_鹿

最新推荐文章于 2025-02-15 10:14:54 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： js 全屏效果视频全屏监控分屏全屏视频插件

本文链接：https://blog.csdn.net/ld395353765/article/details/111314124

版权

本文介绍了如何使用JS实现页面视频监控的全屏效果，特别提到了在Gecko和WebKit浏览器中全屏显示的差异。在Gecko浏览器中，元素会自动铺满屏幕，而WebKit则需要手动设置CSS样式"width: 100%; height: 100%"以达到全屏。同时，若div未设置背景样式，在WebKit中全屏时会被填充为黑色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全屏效果为传入div元素全屏：

代码块

<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<body> 
<div style="margin:0 auto;height:600px;width:700px;"> 
<button id="btn">js控制页面的全屏展示和退出全屏显示</button> 
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" > 
<h1>js控制页面的全屏展示和退出全屏显示</h1> 
</div> 
</div> 
</body> 
<style type="text/css">
#content:-webkit-full-screen {
 background-color:rgb(255, 255, 12);
}
</style>
<script language="JavaScript"> 
document.getElementById("btn").οnclick=function(){ 
 var elem = document.getElementById("content"); 
 console.log(elem); 
 requestFullScreen(elem); 
}; 
function requestFullScreen(element) { 
 var requestMethod = element.requestFullScreen || element.webkitRequestFu

最低0.47元/天解锁文章