1.主要是加入 

x5-video-player-fullscreen="true" 
    x5-playsinline 
    playsinline 
    webkit-playsinline

这几个属性。

2.如果需要微信中支持，只能引入wx的js. 在 

//必须在weixin JSAPI的WeixinJSBridgeReady才能生效
         document.addEventListener('WeixinJSBridgeReady',() => {
            // alert('1111')
            video.play()
          },false);

这里面才生效 

3.第二种兼容微信的方法。

由于上面的办法只会调用一次。微信是禁止自动播放的。必须有交互产生才可以播放。所以监听触摸事件。

// 微信中第二种方案
        // document.addEventListener('touchstart', function () {
        //     function audioAutoPlay() {
        //         var audio = document.getElementById('shakeVideo');
        //             audio.play();
        //     }
        //     audioAutoPlay();
        //  });

下面是demo完整代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <!-- <script src="./assets/wx-1.2.0.js"></script> -->
</head>
<body>
    <div>哈哈111</div>
    <button onclick="playFun()" style="width: 88px; height: 44px;">播放</button>
    <video autoplay muted id="shakeVideo" ref="video1"  width="100%"  height="450rpx" 
    src="https://www.apple.com.cn/105/media/cn/iphone-12-pro/2020/e70ffbd8-50f1-40f3-ac36-0f03a15ac314/anim/hero/small_2x.mp4" 
    x5-video-player-fullscreen="true" 
    x5-playsinline 
    playsinline 
    webkit-playsinline
    x5-video-player-type="h5"></video> 
    <script>
        let video = document.getElementById('shakeVideo')
         function playFun() {
            video.play()
         }
         //必须在weixin JSAPI的WeixinJSBridgeReady才能生效
         document.addEventListener('WeixinJSBridgeReady',() => {
            // alert('1111')
            video.play()
          },false);

        // 微信中第二种方案
        // document.addEventListener('touchstart', function () {
        //     function audioAutoPlay() {
        //         var audio = document.getElementById('shakeVideo');
        //             audio.play();
        //     }
        //     audioAutoPlay();
        //  });
    </script>
</body>
</html>

按照惯例，我参考了以下文章

https://xiaopohai.blog.csdn.net/article/details/106385932

https://blog.csdn.net/zhaoxl0210/article/details/107084260

版权声明：本文为feifeiwuxian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/feifeiwuxian/article/details/111633643