如何解决Html5中video视频标签微信端移动端web端不能自动播放问题？

如何解决Html5中video视频标签微信端移动端web端不能自动播放问题？

H5 video标签，移动端不能自动播放，下面直接上解决方案：

文章来源地址https://www.toymoban.com/article/147.html

1、IOS微信端，自带浏览器不能自动播放

 <video class="video" id="myVideo" src="视频地址" 
 autoplay="" 
 muted="" 
 loop="" 
 webkit-playsinline="" 
 playsinline="" 
 x5-playsinline="" 
 x-webkit-airplay="allow" 
 x5-video-player-type="h5" 
 x5-video-player-fullscreen="" 
 x5-video-orientation="portraint"  
 style="display: inline;"
/>您的浏览器不支持vedio，请更换浏览器再观看！</video>

2、JS解决方案，只能解决一般问题

<script>
function autoPlayVideo() {
    /* 自动播放视频效果，解决浏览器或者APP自动播放问题 */
    function videoInBrowserHandler() {
        videoPlay(true);
        document.body.removeEventListener('touchstart', videoInBrowserHandler);
    }
    document.body.addEventListener('touchstart', videoInBrowserHandler);
    /* 自动播放视频效果，解决微信自动播放问题 */
    function videoInWeixinHandler() {
        videoPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            videoPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', videoInWeixinHandler);
}
function videoPlay(isPlay) {
    var media = document.getElementById('myVideo');
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}
autoPlayVideo();
</script>

到此这篇关于如何解决Html5中video视频标签微信端移动端web端不能自动播放问题？的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！