在为一个客户开发一个网站的时候，一开始的开屏是视频播放。

我们在电脑端，安卓手机，鸿蒙手机下测试都可正常自动播放。

在苹果手机端使用自带的浏览器，也可以正常播放。

但是在苹果手机的微信中无法自动播放。

经测试发现是苹果微信不能自动播放。

iOS 微信禁止自动播放 video（这是系统级限制，不是代码问题）

你现在遇到的情况，是所有前端开发者在 iOS 微信里都会遇到的：

• Safari：允许 autoplay（只要 muted）

• 微信：不允许 autoplay，即使 muted、playsinline 全部设置了

这是微信内置浏览器的硬性策略，属于 系统级别的限制，不是你能通过 HTML 或 JS 绕过去的。

方案 1：使用 WeixinJSBridge（唯一能自动播放的方式）

微信只允许在 JS-SDK ready 后播放视频。

你必须加上：

document.addEventListener("WeixinJSBridgeReady", function () {
    var video = document.querySelector("#pc-banner .video video");
    video.play();
}, false);

这段代码能绕过 autoplay 限制，让视频在微信里自动播放。

但注意：

要想使用 WeixinJSBridge，你必须满足：

• 域名必须在公众号后台配置 JS 安全域名

• 必须在 HTTPS 下

• 必须加载微信 JS-SDK

如果你没有公众号后台，这个方案无法使用。

这个方案虽然可行，但是太麻烦了。

方案 2：放弃自动播放 → 使用点击播放（最稳定）

这是微信官方推荐的方式，也是大多数网站采用的方式。

流程：

1. 添加control属性。

2. 点击便可播放视频

这是最兼容、最稳定的方案。

以下是我制作的一个方案：

检测非苹果微信浏览器下，都正常播放。

当检测到是苹果微信的时候，则添加control属性。

 
<div class="index-banner" id="pc-banner"> 
                
                <div class="banner-txt-bg ">
                     <div class="banner-txt">
                         <div class="container-xl">
                             <div class="ico"><img src="封面图" alt="" class="w-100" ></div>
                        </div>
                    </div>
                </div>            
         
    <div class="video"> 
     <video
          src="视频地址"
          autoplay
          muted
          playsinline
          webkit-playsinline
          x5-playsinline="true"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          x5-video-orientation="portraint"      
          >  
      </video>


<script>
$(document).ready(function(){

    var video = document.querySelector("#pc-banner .video video");

    var ua = navigator.userAgent;
    var isIOS = /iPhone|iPad|iPod/i.test(ua);
    var isWeChat = /MicroMessenger/i.test(ua);

    // 如果是苹果微信 → 添加 controls + poster
    if (isIOS && isWeChat) {
        video.setAttribute("controls", "controls");
        video.removeAttribute("autoplay");
        video.setAttribute("poster", "/static/upload/image/20260317/1773681198888176.webp");

        // 监听用户开始播放 → 移除 controls
        video.addEventListener("play", function () {
            video.removeAttribute("controls");
        });

        // 播放结束后也移除 controls（保持干净）
        video.addEventListener("ended", function () {
            video.removeAttribute("controls");
        });
    } else {
        // 非苹果微信 → 正常自动播放
        video.play();
    }

    // 你的原逻辑：播放进度监听
    video.addEventListener("timeupdate", function () {
        var duration = video.duration;
        var current = video.currentTime;

        if (duration - current <= 2) {
            $(".banner-txt-bg").addClass("active");
            $(".banner-txt").addClass("active");
        }
    });

});


</script>