h5网站开发-微信浏览器无法自动播放视频的解决方式？

一、需求：

使用h5开发的网站，首页的banner是一个video视频，在PC端上和手机浏览器上都能正常播放，但是在手机微信浏览器里面视频是无法自动播放的。

二、实现效果：

1.微信浏览器的效果：

2.正常效果：

三、代码实现：

靠谱的方式是：用户必须要点击视频才能触发

<video id="myVideo" muted autoplay="autoplay" loop style="width: 100%;">
     <source src="{$banner['video']|default=''}" type="video/mp4">
video>


    <script>
        //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
        document.getElementById('myVideo').play();
        //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
        document.addEventListener("WeixinJSBridgeReady", function () {
            document.getElementById('myVideo').play();
        }, false);

	 	//监听用户点击视频（点击视频后即可播放视频）
		var video = document.getElementById("myVideo"); // 获取视频元素
		function handleClick(event) {
		   console.log('用户点击了视频');
		   video.play();
		}
		video.addEventListener('click', handleClick); // 添加点击事件监听器

      	//监听用户点击屏幕（点击屏幕后即可播放视频）
		//document.addEventListener('touchstart', function(){ 
		    //var video = document.getElementById("myVideo");
		        //video.play();
		//}, false);
    script>

完成~