解决前端微信浏览器中video标签不能自动播放视频问题

最新|解决前端微信浏览器中video标签不能自动播放视频问题

最近前端有一个需求要求在网页中自动播放视频，PC端没有问题，移动端是有问题的，移动端为了避免浪费用户的流量，默认video是不能够自动播放的，即使加了autoplay属性，也只能实现在PC端自动播放，在移动端依旧不能自动播放。

网上有很多解决方案，都不能真正的解决问题，于是自己尝试了一下。

//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效

document.addEventListener("WeixinJSBridgeReady", function () {

    document.getElementById('video').play();

}, false);

（发现一个奇葩问题，有一些Android部分手机生效，部分手机不生效）

总结自动播放需要满足几个条件所有移动端手机都可以自动播放：

1.必须要有用户点击事件
2.用户点击事件调用video标签play方法时，video标签要存在（废话）
3.接收点击事件的标签和video标签不能是父子关系(就是body接收的点击事件调用video的play方法，播放器也是不会播放视频的)
4.接收点击时候后，要立刻调用play()方法，网络请求后调用play()方法可能会无效

解决方案

思路

在页面初始化话的时候写一个video标签，这个video标签在可见区域之外，video标签和需要点击事件控件不是父子关系，当用户点击播放按钮时，立刻调用play()方法。设置video标签的样式到可见区域内，通过z-index控制层级关系，就能实现自动播放。

代码

这里已vue项目为例

vue项目#app为项目根目录。给他添加点击事件。
#app与#index_Box下面的video标签不是父子关系

	onclicked(i) {
        //用户点击时间播放视频
        let video = document.getElementById('realScreenVideo');
        this.realScreenUrl = "";  //这里不知道播放链接可以先播放空链接，
        video.play();//这次播放事件触发完成之后，可以随意调用play方法都是生效的。
        getPlayUrl();//网络请求获取播放链接，然后调用play方法。
    }

同一个播放器事件触发完成之后，可以随意调用play方法都是生效的。

需要关闭时暂停播放，将video播放器控件移出可视区域外。（不是清除设个控件）

这个方法可以适用于所有的移动端手机，但是有一个弊端就是至少要点击一次。