html5 video在安卓微信浏览器视频不能自动播放 !
html5 video在安卓微信浏览器视频不能自动播放 !
html5 video在安卓微信浏览器视频不能自动播放 !
注:重要的事情说三遍, 其他帖子说可以自动播放的我都有试过,一个生效的都没有。
一.微信浏览器(x5内核):
1.不能自动播放
2.全屏
3.最顶层(z层的最顶层)
二.ios系统video自动播放:(经手机测试没有问题可以实现)
<div class="playvideo">
<div class="zy_media">
<video id="myVideo" muted autoplay poster="https://r1.ykimg/05420408584A363C6A0A47047DD24931"
data-config='{"mediaTitle": "测试视频--视频"}'>
<source src="http://www.w3cschool/try/demo_source/mov_bbb.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
</div>
</div>
<script>
function autoPlayVideo() {
/* 自动播放视频效果,解决浏览器或者APP自动播放问题 */
function videoInBrowserHandler() {
videoPlay(true);
document.body.removeEventListener('touchstart', videoInBrowserHandler);
}
document.body.addEventListener('touchstart', videoInBrowserHandler);
/* 自动播放视频效果,解决微信自动播放问题 */
function videoInWeixinHandler() {
videoPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
videoPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', videoInWeixinHandler);
}
function videoPlay(isPlay) {
var media = document.getElementById('myVideo');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}
</script>
三.android系统中解决方案:暂未发现可以实现的例子
误区:(无效的解决方案)
1.设置video属性autoplay;
2.通过js调用play();
3.通过js来触发click事件;
4.使用插件videojs;
5.通过js调用load()然后再调用play();
6.设置video属性webkit-playsinline="true";
7.touchstart监听;
8.stalled事件处理;
9.canplaythrogh事件处理;
10.readyState大于2的处理;
11.DOMContentLoaded监听;
12.微信js api中WeixinJSBridgeReady;
13.微信js api中getNetworkType;
14.白名单;