解决微信浏览器video标签自动播放视频失效

正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效。罪魁祸首是微信把video标签都成微信规则的了。下面方式可以解决视频播放全屏以及不能自动播放的问题。

<video id="videoPlay" class="video" autoplay="autoplay" playsinline="true"   preload="auto"  poster="" height="100%" style="text-align: -webkit-center; margin: 0 auto;" controls="">
    <source src="move.mp4"  type="video/mp4" >
</video>
(function () {
            //触屏即加载音乐

            // document.addEventListener('touchstart', function() {undefined
            // document.getElementById('media').play()
            // }

             //进入微信页面即加载
            // document.addEventListener('WeixinJSBridgeReady', function() {undefined
            // document.getElementById('videoPlay').play()
            // })     
            
            var voice = document.getElementById('videoPlay');
            if(typeof WeixinJSBrdgeReady=="object" && typeof WeixinJSBridge.invoke == "function"){
                voice.play()
            }else{
                if (document.addEventListener) {
                    document.addEventListener("WeixinJSBridgeReady", function () {
                        voice.play();
                    }, false);
                } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", function () {
                        voice.play();
                    });
                    document.attachEvent("onWeixinJSBridgeReady", function () {
                        voice.play();
                    });
                }
            }
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容