分类： 网站

移动版本的微信，在其内置的微信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>

    "spacing": {
        "blockGap": "1.2rem",
        "padding": {
            "left": "var:preset|spacing|50",
            "right": "var:preset|spacing|50"
        }
    },

6.X版本的Wordpress中，区块之间会有一个默认1.2rem的间隔，这个间隔在页眉页脚设置中会与其他不同色彩的区块产生非常显眼的割裂，或者同一种非白色区块中间产生间隔缝隙。

如何修改这个问题？很简单，我们可以在主题样式和区块设置 (theme.json)中进行更改，去掉这个间隔，让我们的区块背景更加融合或者分离的更明显，具体如上代码，找到 “spacing” 中的 “blockGap” 部分，将预设的 “1.2rem” 改为null即可（不用带引号），修改完毕的代码如下所示↓

修改完毕后最好检查一下页面是否有其他区块被影响，目前观察容易受到影响的有导航栏，可以在其单独的样式中针对性调整区块间隔。

    "spacing": {
        "blockGap": null,
        "padding": {
            "left": "var:preset|spacing|50",
            "right": "var:preset|spacing|50"
        }
    },