上一篇
html 如何退出全屏播放
在HTML中，退出全屏播放通常涉及到JavaScript的使用，全屏播放的实现通常是通过调用浏览器的全屏API，如requestFullscreen()或mozRequestFullScreen()（Firefox），webkitRequestFullscreen()（Chrome, Safari）等，同样地，退出全屏播放也需要调用相应的退出全屏API，如exitFullscreen()或mozCancelFullScreen()（Firefox），webkitExitFullscreen()（Chrome, Safari）等。
以下是一个简单的示例，展示了如何在HTML中实现全屏播放和退出全屏播放的功能：
<!DOCTYPE html>
<html>
<head>
<title>全屏播放示例</title>
<style>
#fullscreenBtn {
width: 100px;
height: 100px;
backgroundcolor: red;
color: white;
textalign: center;
lineheight: 100px;
cursor: pointer;
}
</style>
<script>
function requestFullscreen() {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
element.msRequestFullscreen();
}
}
function exitFullscreen() {
var element = document.documentElement;
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}
</script>
</head>
<body>
<div id="fullscreenBtn" onclick="requestFullscreen()">进入全屏</div>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var video = document.getElementById("myVideo");
video.addEventListener('click', function() {
this.play(); // 点击视频开始播放，可以替换为其他事件触发全屏播放
});
</script>
</body>
</html>
在这个示例中，我们创建了一个红色的按钮，当点击该按钮时，会调用requestFullscreen()函数进入全屏模式，我们也为视频元素添加了一个点击事件监听器，当视频被点击时开始播放，并自动进入全屏模式，当再次点击红色按钮时，会调用exitFullscreen()函数退出全屏模式。
需要注意的是，由于安全和用户体验的原因，不是所有的元素都可以进入全屏模式，一些元素可能被设置为不可聚焦，或者浏览器可能会阻止某些元素的全屏操作，不同的浏览器对全屏API的支持也有所不同，因此在实际开发中需要考虑到这些兼容性问题。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/171865.html
