【网站】让WordPress封面区块的视频背景支持在微信环境下自动切换为照片

移动版本的微信，在其内置的微信WEB环境中，对视频播放有很多限制，如果我们的封面区块想设置视频，就会出现无法加载播放的情况。

为了解决这个问题，我去看了一下一些大厂的做法，当然大厂用的肯定不是WP，不过思路是可以借鉴的。

华为的做法是用一个JS来判断是否是微信环境，如果是微信环境则切换到图片。OPPO的做法更加直接，他们直接用图片+动画的形式解决了视频这个问题，emm通用性确实刚刚的。

那么我们在WP下，使用原版的封面区块是否可以进行类似的切换呢？也是可以的，原理是在区块代码中插入一个图片，利用一个简单的IF判断来实现微信环境下的自动切换。

具体代码如下：

<!-- wp:cover {"url":"//默认图片地址","id":588,"dimRatio":50,"overlayColor":"contrast","isUserOverlayColor":true,"backgroundType":"video","minHeight":840,"minHeightUnit":"px","isDark":false,"className":"main-container","layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light main-container" style="min-height:840px">
    <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span>

    <!-- 视频背景，添加 id="background-video" -->
    <video id="background-video" class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline 
        src="//视频地址" data-object-fit="cover">
    </video>

    <!-- 备用静态图片，默认隐藏 -->
    <img id="background-image" src="//图片地址" 
        alt="Background Image" style="display:none; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;">

    <div class="wp-block-cover__inner-container">
        <!-- 可添加文本或其他内容 -->
    </div>
</div>
<!-- /wp:cover -->

<script>
document.addEventListener("DOMContentLoaded", function () {
    function isWeChatBrowser() {
        return /MicroMessenger/i.test(navigator.userAgent);
    }

    if (isWeChatBrowser()) {
        let video = document.getElementById("background-video");
        let image = document.getElementById("background-image");

        if (video && image) {
            video.style.display = "none"; // 隐藏视频
            image.style.display = "block"; // 显示备用图片
        }
    }
});
</script>