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

最新推荐文章于 2025-03-11 16:51:32 发布

weixin_44694538

最新推荐文章于 2025-03-11 16:51:32 发布

阅读量9.6k

点赞数

文章标签： javascript js html html5 jquery

本文链接：https://blog.csdn.net/weixin_44694538/article/details/123475122

版权

该博客探讨了微信内置浏览器对video标签的特殊处理导致的全屏样式改变和自动播放失效问题。提供了一段JavaScript代码，用于确保视频在微信环境中能够自动播放并保持正确的全屏显示。该解决方案适用于微信页面的视频播放优化。

摘要由CSDN通过智能技术生成

正常在浏览器好好的视频，在微信内置浏览器中点击播放全屏，样式也不一样，自动播放失效。罪魁祸首是微信把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();
                    });
                }
            }
    })