ios 微信浏览器视频自动播放问题解决方法
播放自动视频的两个前提条件
- 设置自动播放 autoplay
- 设置静音 muted
有些限制必须有点击操作，这个看需求，如果实现不了进入页面自动播放可以考虑价格播放按钮，引导用户点击。
因为我的视频不需要显示控件，不需要全屏播放 这些就统统去掉了。
<video
src=""
id="videoRef"
autoplay
muted
x5-video-player-type="h5"
webkit-playsinline="true"
x-webkit-airplay="true"
playsinline="true"
x5-video-player-fullscreen="true"
></video>#videoRef video::-webkit-media-controls {
display: none !important;
}问题描述：由于浏览器限制，视频不能够自动播放，需要用户手势触发才可以。
解决方法：通过微信浏览器提供的WeixinJSBridgeReady做桥接后就可以绕过这一限制。
上面链接中的操作比较繁琐，在此给出简化版本（亲测可用）：
function doPlay() {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
var $video1 = $("#video1");
var $video2 = $("#video2");
$video1[0].play();
$video2[0].play();
});
}
if (window.WeixinJSBridge) {
doPlay();
} else {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
doPlay();
},
false
);
}需要注意的是，监听 WeixinJSBridgeReady 事件后，回调函数里需要调用一下 invoke，在 invoke 中操作视频才可以生效。
另外，页面不需要引入 jweixin-1.0.0.js，微信浏览器会自带 api。
来自： https://github.com/AnsonZnl/v-blog/blob/master/docs/articles/WeApp/IOS微信浏览器视频自动播放问题解决方法.md
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
