小编分享html 如何退出全屏播放。

小甜 • 2024年6月25日 12:00 • 网站搭建 • 阅读 0

在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的支持也有所不同，因此在实际开发中需要考虑到这些兼容性问题。

本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/441693.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除