iOS设备的微信浏览器受微信浏览器限制，无法自动播放，解决方案如下

iOS设备＋微信浏览器

  • 一定要监听WeixinJSBridgeReady事件
  • 一定要调用video.load();强制加载
  • 之后如果要保持在第一帧：video.currentTime = 1;
  • 如果要播放就play，暂停就pause，一切正常了
  • 实测加载完毕只有canplay事件可以正常监听

代码如下：

// 微信浏览器无需点击自动播放
  document.addEventListener('WeixinJSBridgeReady', function () {
      // 微信环境专用事件，确保桥接就绪
         video.load();
         video.addEventListener('canplay', function onCanPlay() {
         video.currentTime = 1;
       });
  });

iOS设备+Safari

        // 兼容原生浏览器
        video.addEventListener('canplay', function onCanPlay() {
                video.currentTime = 1;
                video.pause();
        });

和原生浏览器处理方式一致

可选但不一定有用的属性

        playsinline
        webkit-playsinline
        x5-playsinline
        x5-video-player-type="h5-page"

完整生效代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <style>
        body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
    <video 
        id="myVideo"
        style="height: 100%; width: 100%;background-color: blue; cursor: pointer;"
        src="test.mp4#t=0.001"
        autoplay
    </video>


    <script>
        const video = document.getElementById('myVideo');
        // // 点击播放/暂停
        video.addEventListener('click', function() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        });
        // 微信浏览器无需点击自动播放
        document.addEventListener('WeixinJSBridgeReady', function () {
            // 微信环境专用事件，确保桥接就绪
            video.load();
            video.addEventListener('canplay', function onCanPlay() {
                video.currentTime = 1;
            });
        });
        
        // 兼容原生浏览器
        video.addEventListener('canplay', function onCanPlay() {
                video.currentTime = 1;
                video.pause();
        });
    </script> 


</body>
</html>

Vue环境

有一个致命问题，WeixinJSBridgeReady是一次性事件，html可以捕获到，但是等到Vue挂载上去，这个事件早就调用结束了，所以是永远监听不到的

这种情况可以借助WeixinJSBridge的方法去曲线救国，在回调函数里写入自己的业务（如我这个是强制加载视频）

onMounted(()=>{
    WeixinJSBridge.invoke( "getNetworkType", {}, 
        () => { 
            video.load(); 
            video.play(); 
        } 
    );
})