
在 Google Chrome 浏览器上的视频自动播放受到 Google 自动播放政策 的影响,不支持自动播放。早在2018年Chrome就提出了这种自动播放的策略,主要是为了照顾用户的体验感。
Google Chrome自动播放策略
1. 始终允许静音模式下自动播放;
2. 在以下的情况中,带声音播放会被允许:
- 用户已经与当前的域进行了交互(也就是click,tap事件);
- 在桌面设备上,用户的媒体参与度指数阈值已经超过,这意味着用户之前播放过有声视频;
- 用户已经将网站添加到移动设备上的主屏幕或允在桌面上安装了PWA。
3. 顶级框架可以向其 iframe 委托自动播放权限,以允许有声自动播放。
所以,在非静音模式下,即使我们的视频使用了 autoplay 属性代码,使用在 Google Chrome 浏览器里仍然不会自动播放的。
解决方法
根据上述Google Chrome自动播放策略中描述的“允许静音模式下自动播放”,那么,最简单的解决方法就是把我们页面中的视频文件设置为静音状态就可以了。
1. 内置本地视频(经典编辑器)
对应上传到网站服务器的视频文件,嵌入到页面中时,除了添加自动播放代码 autoplay=”” 外,还要添加默认的静音标记代码 muted=”muted”,参考代码如下:
<video src="local-video.mp4" autoplay="" controls="" muted="muted"></video>2. Elementor 视频小部件自动播放
在使用Elementor编辑器创建的页面中,添加 Video视频小部件时,在 视频选项 设置中,同时开启 自动播放( Autoplay) 和 静音(Mute) 选项,如下图所示:

3. 块编辑器中视频自动播放
在使用WordPress块(Gutenberg)编辑器创建的页面中,添加 Video视频区块时,在视频的设置中,开启 自动播放( Autoplay)选项时,系统会自动同步开启 静音(Mute) 选项,如下图所示:

以上就是WordPress建站过程中,不同编辑模式状态中,实现视频自动播放的最方便的解决方法。总之,就是要设置视频为静音状态,从而实现在 Google Chrome 浏览器上的视频自动播放的目的。



