网页视频播放限制

李恒道

问题

之前好多人都问过我为什么使用click点击视频播放元素
或者对viode元素使用play却没有什么作用
这是因为浏览器的资源限制问题
具体可以参考
https://developer.chrome.com/blog/autoplay/#iframe-delegation

Chrome's autoplay policies are simple:

Muted autoplay is always allowed.
Autoplay with sound is allowed if:
The user has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

大致翻译

Chrome自动播放限制
静默播放视频是允许的
如果以下情况允许自动播放声音视频是允许的
    用户与页面进行交互，点击，触摸等等
    在桌面端，用户媒体参与门槛达标，意味着用户之前播放过声音视频
    用户添加网站到他们的主屏幕在移动端上，或在桌面安装pwa程序
顶层iframe可以分发自动播放权限对他们的firame允许自动播放带有声音的视频

再补一条，我们可以通过设置浏览器来允许有声视频的自动播放

总结

那么我们一句话总结一下
1.自动播放视频需要先设置video的volume属性为0，使其静默播放
2.如果不设置，则必须用户与网页进行交互行为才可以
3.让用户自己设置允许该网站自动播放视频
因为我个人使用火狐，所以仅提供火狐的修改位置

结语

撒花~

wwwwwllllk

setInterval(()=>{
        document.querySelector('.ccH5TogglePause').click()
        setTimeout(() => {
            document.querySelector('.ccH5TogglePlay').click()
        },1000)


     },3000)


我这样实现了参考一下
https://blog.csdn.net/qq_36538012/article/details/89168166    还有这个也设置一下

wwwwwllllk

wwwwwllllk 发表于 2022-6-13 20:45
setInterval(()=>{
        document.querySelector('.ccH5TogglePause').click()
        setTimeout(() = ...

因为使用中间那个好像是因为回调还是什么搞不懂，我看到下面默认隐藏了播放暂停，没问题。你可以试一下

wwwwwllllk

发错位置了，靠

1433858005

document.querySelector('video').volume=0
是volume
1.自动播放视频需要先设置video的volumn属性为0，使其静默播放

李恒道

wwwwwllllk 发表于 2022-6-13 20:47
发错位置了，靠

然而我刚看到~

李恒道

1433858005 发表于 2022-6-13 20:51
document.querySelector('video').volume=0
是volume
1.自动播放视频需要先设置video的volumn属性为0，使 ...

纠正了，谢谢哥哥

18997894150

ggnb！！！

steven026

单页应用，交互后跳转的新视频总是自动播放，哥哥有啥办法禁止么