编程技术

Document

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>
                        $(window).on('resize', function() {
                            var video = document.getElementById('myVideo');
                            var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
                                if (isMobile && $(window).width() < 1025) {
                                    // video.removeAttribute('controls');
                                     //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
                                    document.getElementById('myVideo').play();
                                            //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
                                            document.addEventListener("WeixinJSBridgeReady", function () {
                                                document.getElementById('myVideo').play();
                                                document.getElementById('video').play();
                                     }, false);
                                    video.addEventListener('click', function() {
                                        
                                        video.play();
                                    });
                                } else {
                                    // video.setAttribute('controls', 'controls');
                                }
                            });
                    
                    </script>

完成~