最新|解决前端微信浏览器中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项目为例
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="index_Box" style="position: fixed;top: -50%;transform: translateY(-50%);max-height: 300px;width:100%;z-index: 30000">
<video id="index_realScreenVideo" autoplay="autoplay" loop style="height: 100%;width: 100%;z-index: 30000"
x5-video-player-type="h5-page" x5-video-player-fullscreen="true" class="video" preload="auto" type="application/x-mpegURL"
poster="http://static-cos.xbov/promotion_img/video_poster.gif" :src="realScreenUrl" playsinline=""
webkit-inline="" webkit-playsinline="" x-webkit-airplay="allow"></video>
</div>
<div id="app"></div>
<script src="https://res.wx.qq/open/js/jweixin-1.0.0.js">
</script>
</body>
</html>
vue项目#app为项目根目录。给他添加点击事件。
#app与#index_Box下面的video标签不是父子关系
onclicked(i) {
//用户点击时间播放视频
let video = document.getElementById('realScreenVideo');
this.realScreenUrl = ""; //这里不知道播放链接可以先播放空链接，
video.play();//这次播放事件触发完成之后，可以随意调用play方法都是生效的。
getPlayUrl();//网络请求获取播放链接，然后调用play方法。
}
同一个播放器事件触发完成之后，可以随意调用play方法都是生效的。
需要关闭时暂停播放，将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项目为例
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="index_Box" style="position: fixed;top: -50%;transform: translateY(-50%);max-height: 300px;width:100%;z-index: 30000">
<video id="index_realScreenVideo" autoplay="autoplay" loop style="height: 100%;width: 100%;z-index: 30000"
x5-video-player-type="h5-page" x5-video-player-fullscreen="true" class="video" preload="auto" type="application/x-mpegURL"
poster="http://static-cos.xbov/promotion_img/video_poster.gif" :src="realScreenUrl" playsinline=""
webkit-inline="" webkit-playsinline="" x-webkit-airplay="allow"></video>
</div>
<div id="app"></div>
<script src="https://res.wx.qq/open/js/jweixin-1.0.0.js">
</script>
</body>
</html>
vue项目#app为项目根目录。给他添加点击事件。
#app与#index_Box下面的video标签不是父子关系
onclicked(i) {
//用户点击时间播放视频
let video = document.getElementById('realScreenVideo');
this.realScreenUrl = ""; //这里不知道播放链接可以先播放空链接，
video.play();//这次播放事件触发完成之后，可以随意调用play方法都是生效的。
getPlayUrl();//网络请求获取播放链接，然后调用play方法。
}
同一个播放器事件触发完成之后，可以随意调用play方法都是生效的。
需要关闭时暂停播放，将video播放器控件移出可视区域外。（不是清除设个控件）
这个方法可以适用于所有的移动端手机，但是有一个弊端就是至少要点击一次。