【H5】html5 video 在微信浏览器视频不能自动播放 ！

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.com/05420408584A363C6A0A47047DD24931"
				data-config='{"mediaTitle": "测试视频--视频"}'>
				<source src="http://www.w3cschool.cc/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.白名单；