尝试使用Javascript使视频全屏显示
我有一个带有视频缩略图的页面。单击视频时，它会打开文件video.html并将视频路径传递给该文件。
我试图让video.html以全屏方式打开视频，但当我说全屏时，我真的是指没有浏览器可见的所有屏幕。
这是video.html的内容
<body>
<script>
window.onload=function() {
let videoDiv = createVideoDiv()
if (videoDiv.requestFullscreen) {
videoDiv.requestFullscreen();
}
else if (videoDiv.mozRequestFullScreen) {
videoDiv.mozRequestFullScreen();
}
else if (videoDiv.webkitRequestFullScreen) {
videoDiv.webkitRequestFullScreen();
}
else if (videoDiv.msRequestFullscreen) {
videoDiv.msRequestFullscreen();
}
document.getElementById("myVideo").appendChild(videoDiv);
}
</script>
<div id="myVideo"></div>
</body>这是createVideoDiv()
function createVideoDiv() {
var video = document.createElement("VIDEO");
video.setAttribute('controls', '');
video.setAttribute('autoplay', '');
video.setAttribute('width', '100%');
var source = document.createElement("SOURCE");
source.setAttribute('src', getClickedVideo());
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
return video;
}这是css
#contentVideo:fullscreen {
width:100vw;
height:100vh;
}页面打开，视频自动播放，它填满了浏览器的整个内部。我还能看到浏览器。
我该怎么做？
回答 2
Stack Overflow用户
发布于 2020-04-12 01:58:33
变成全屏应该通过一个用户操作，点击，点击等等来完成。它当然有一个JS代码，但不会在页面加载时自动运行，因为浏览器阻止它，除非用户做一些事情。这是一个很好的，也许是必要的功能，以阻止广告惹恼人们。
因此，只需制作一个按钮或其他东西，并将您的函数指定为onclick处理程序。
Stack Overflow用户
发布于 2020-04-12 02:15:45
正如F.NiX所述，当用户单击或按下按钮或其他用户输入事件时，尝试addEventListener到窗口。然后，在回调函数中，只需对要全屏显示的DOM元素调用element.requestFullscreen()即可。有关详细信息，请参阅此页面：MDN Fullscreen API docs
例如，当用户单击页面上的某处时，元素将全屏显示。
window.addEventListener('mousedown', ()=>element.requestFullscreen(), {once:true});我添加{once:true}只是为了在调用侦听器后删除它，这样它就不会减慢页面的速度。如果您愿意，您可以将其删除。
https://stackoverflow.com/questions/61160965
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号