html5 video微信浏览器视频不能自动播放解决方案

时间：2024-03-12 16:04:48

IOS解决方案

核心js
需要引用微信sdk

    //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
    document.getElementById(\'car_audio\').play();
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
        document.getElementById(\'car_audio\').play();
        document.getElementById(\'video\').play();
    }, false);

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    <script src="js/jquery1.11.0.js"></script>
    <title>520宣言 让爱增值</title>
    <script>
        setRem();
        window.addEventListener(\'orientationchange\', setRem);
        window.addEventListener(\'resize\', setRem);
        function setRem() {
            var html = document.querySelector(\'html\');
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 20 + \'px\';
        }
    </script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="js/wechat.share.js"></script>
</head>
<body>
    <div class="top psa"><img src="images/top.png" /></div>
    <div class="title psa"><img src="images/title.png" alt="" /></div>
    <div class="center psa"><img src="images/center.png" alt="" /></div>
    <div class="bottom psa"><img src="images/bottom.png" alt="" /></div>
    <video id="car_audio" class="pv-video psa" poster="images/bg.png" preload="preload" autoplay="true" x-webkit-airplay="allow" x5-playsinline="" webkit-playsinline="" playsinline="true" src="https://dpv.videocc.net/a4cd7a4736/5/a4cd7a4736b31722fb752c4db6e059b5_2.mp4?pid=1589536746708X1809765" controls=\'true\'></video>
</body>
<script>
    //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
    document.getElementById(\'car_audio\').play();
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
        document.getElementById(\'car_audio\').play();
        document.getElementById(\'video\').play();
    }, false);
</script>
</html>

相关文章