Skip to main content

微信内置浏览器 video 自动播放失效

  • 问题描述:在微信内置浏览器中,video 标签设置 autoplay 属性,并且默认静音,但是视频并没有自动播放。

  • 解决方案:微信内置浏览器对于 video 标签的 autoplay 属性有一定的限制,只有在用户主动触发的情况下才会自动播放。所以,可以通过监听用户的触摸事件,然后在触摸事件中调用 video 的 play 方法来实现自动播放。

  • 示例代码如下:此处使用的是 jQuery 示例,可以根据实际情况进行修改。但其重点是根据 WeixinJSBridge 对象的存在与否来判断是否在微信内置浏览器中,然后通过调用 WeixinJSBridge.invoke 方法来获取网络类型,从而触发播放。

<video id="video" src="video.mp4" autoplay muted></video>
<script>
jQuery(document).ready(() => {
function doPlay() {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
const player = jQuery("#video");
player[0].play();
});
}

if (window.WeixinJSBridge) {
doPlay();
} else {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
doPlay();
},
false
);
}
});
</script>