video 标签有一个 autoplay 属性可以实现自动播放，实际场景在 PC 端可以实现自动播放功能，但是在移动端无法实现 autoplay ，在 ios 上也无法实现自动播放，在微信客户端也是无法实现。经历了多次失败尝试，最终找到了解决方案
为什么无法自动播放
<video src="./av.mp4" autoplay />
主要是因为防止该功能滥用，对用户体验不好，浏览器在没有交互操作之前不允许有声音的媒体文件自动播放。 而且各个浏览器关于自动播放策略有不同的实现。
纯 h5 页面实现自动播放
这里的纯 h5 指的是在移动端浏览器打开，不是在 PC 端打开。
实现方案有两种
对 video 标签的设置
muted属性，因为没有声音的媒体，浏览器不会限制，然后再引导用户开启声音，或者让用户自己开启通过弹窗提示用户是否自动播放，然后点击开启自动播放
// PC端
document.body.addEventListener("mousedown", () => {
console.log("触发播放");
this.videoRef.play();
});
// 移动端
document.body.addEventListener("touchstart", () => {
console.log("触发播放");
this.videoRef.play();
});
// 微信端IOS手机下触发自动播放，大部分IOS能正常自动播放（安卓机只能通过touchstart触发播放）
document.body.addEventListener("WeixinJSBridgeReady", () => {
console.log("触发播放");
this.videoRef.play();
});
Safari 只允许通过用户交互来触发有声媒体的播放，而不是在用户交互后就打开 Autoplay 限制。
微信客户端如何解决自动播放问题？
首先引入官方的 jssdk
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
然后在 wx.ready 回调里面调用 play() 方法即可以实现自动播放
wx.config({ ... });
wx.ready(() => {
const video = document.querySelector("video");
video.play();
})
或者直接监听 WeixinJSBridgeReady 事件，然后调用 play() 方法即可以实现自动播放
document.addEventListener(
"WeixinJSBridgeReady",
function () {
video.play();
},
false
);
微信自动播放的漏洞不知道是否被修复，可以尝试实践下
