在為一個客戶開發(fā)一個網(wǎng)站的時候，一開始的開屏是視頻播放。

我們在電腦端，安卓手機，鴻蒙手機下測試都可正常自動播放。

在蘋果手機端使用自帶的瀏覽器，也可以正常播放。

但是在蘋果手機的微信中無法自動播放。

經(jīng)測試發(fā)現(xiàn)是蘋果微信不能自動播放。

iOS 微信禁止自動播放 video（這是系統(tǒng)級限制，不是代碼問題）

你現(xiàn)在遇到的情況，是所有前端開發(fā)者在 iOS 微信里都會遇到的：

• Safari：允許 autoplay（只要 muted）

• 微信：不允許 autoplay，即使 muted、playsinline 全部設(shè)置了

這是微信內(nèi)置瀏覽器的硬性策略，屬于 系統(tǒng)級別的限制，不是你能通過 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：放棄自動播放 → 使用點擊播放（最穩(wěn)定）

這是微信官方推薦的方式，也是大多數(shù)網(wǎng)站采用的方式。

流程：

1. 添加control屬性。

2. 點擊便可播放視頻

這是最兼容、最穩(wěn)定的方案。

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

檢測非蘋果微信瀏覽器下，都正常播放。

當(dāng)檢測到是蘋果微信的時候，則添加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");

        // 監(jiān)聽用戶開始播放 → 移除 controls
        video.addEventListener("play", function () {
            video.removeAttribute("controls");
        });

        // 播放結(jié)束后也移除 controls（保持干凈）
        video.addEventListener("ended", function () {
            video.removeAttribute("controls");
        });
    } else {
        // 非蘋果微信 → 正常自動播放
        video.play();
    }

    // 你的原邏輯：播放進度監(jiān)聽
    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>