Failed to execute ‘requestFullscreen‘ on ‘Element‘: API can

浏览器无法自启动全屏模式

报错信息:Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.
翻译:无法在element上执行requestFullscreen方法,这个API只有用户主动行为才可以触发。

// 2021/5/29更新 这个行为新增了报错
报错信息:Uncaught (in promise) TypeError: fullscreen error at window.onload
翻译:在window.onload执行使用fullscreen是错误的
在这里插入图片描述

	window.onload = () => {
        let element = document.documentElement
        if (element.requestFullscreen) {
                element.requestFullscreen()
            } else if (element.msRequestFullscreen) { // 兼容ie
                element.msRequestFullscreen()
            } else if (element.mozRequestFullScreen) { // 兼容火狐
                element.mozRequestFullScreen()
            } else if (element.webkitRequestFullscreen) { // 兼容chrome和safari
                element.webkitRequestFullscreen()
            }
        }
    }

有人在学习了js启动浏览器全屏模式之后,就肯定会想让浏览器在自启动之后就自动触发全屏模式,但是这样是不行的,任何自动加载全屏的代码都无法主动启动浏览器的全屏,无论是异步的还是模拟点击事件也不行!只有用户的主动行为才可以触发(任何鼠标事件任何键盘事件等等),这是为了用户体验和用户的浏览安全。如果您一进入一个网页它就给你弹一个全屏,您一定觉得反感。

如果有小伙伴想要自动全屏的话,那就死了这条心把!网页不是开发者的网页,而是用户的网页。用户才是使用者,才是爸爸。(狗头)

这个错误是因为浏览器的安全策略要求全屏操作必须由用户手势触发,而不是通过脚本自动触发。为了解决这个问题,你可以使用一个用户手势(例如点击按钮)来触发全屏操作。 以下是一个示例代码,通过点击按钮来触发视频的全屏播放: ```javascript var player = videojs('my-video'); var fullscreenButton = document.getElementById('fullscreen-button'); fullscreenButton.addEventListener('click', function() { if (player.paused()) { player.play(); } if (player.isFullscreen()) { player.exitFullscreen(); } else { player.requestFullscreen(); } }); ``` 在上面的代码中,我们首先获取了Video.js播放器实例,并将其赋值给`player`变量。然后,我们通过`getElementById`方法获取了一个具有`fullscreen-button` ID的按钮元素,并将其赋值给`fullscreenButton`变量。 在按钮的点击事件处理函数中,我们首先检查视频是否处于暂停状态,如果是,则调用`player.play()`方法开始播放视频。然后,我们检查当前是否处于全屏状态,如果是,则调用`player.exitFullscreen()`方法退出全屏;如果不是,则调用`player.requestFullscreen()`方法进入全屏。 通过这种方式,你可以确保全屏操作是由用户手势触发的,从而避免了上述错误。请确保你已经正确引入Video.js库,并在HTML中有一个具有`my-video` ID的视频元素和一个具有`fullscreen-button` ID的按钮元素。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kaiqisan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值