如何实现h5视频自动播放

提前说明，此文章只针对<video>标签。

现在项目中经常会碰到在H5页面中嵌入视频的情况，有时候会碰到需要自动播放的情况，之前没觉得是个难点，但实际操作起来一地鸡毛。上网查找了各种攻略，踩了各种坑后，总结了几点，希望能给各位一个参考。

各种踩坑的方法我就不多说了，只说实测有效的，以免耽搁大家的时间

首先是PC端，PC端相对来说容易一下，浏览器对<video>标签的兼容还是很好的，首先需要设置autoplay为true

但如果仅设置autoplay是无法实现自动播放的效果，还需要设置muted为true，即静音播放

这样就可以实现简单的视频自动播放。

其次是移动端，移动端是禁止视频自动播放的，为了避免浪费用户的流量。所以移动端是需要一个交互事件才能操控视频播放。

首先创建并返回 video 上下文 videoContext 对象，已uni为例：

this.videoContext = uni.createVideoContext('myVideo');

然后监听事件触发

this.videoContext.play();

值得注意的是，touch触摸相关事件是无法操控视频播放的，只有tap和click事件才可以，就是这么无奈，无法直接实现就只能绕弯了。

以上内容虽然很简单，但其中免去了各种踩坑操作，真机实测，如果想仅通过<video>标签来实现自动播放的话，至少就我查找的资料无法完美实现，如果有知道更好的方法的话，希望能请各位大神给予指点。