美文网首页
解决微信浏览器video标签自动播放视频失效

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

作者: 这真的是一个帅气的名字 | 来源:发表于2022-03-13 15:51 被阅读0次

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

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/vxardrtx.html