javascript - 响应时将 VideoHeader 转为 Image

Question

我使用的是我在 GitHub 上发现的一个 JS 插件，它使视频标题出现视差，问题是当我运行它响应手机时视频变黑，我试图在响应模式下将视频更改为图像。

我尝试使用@mediatag 但无法正常工作。

<main style="height: 100%">
        <video class="bv-video"></video>
 </main>

<script>
    const backgroundVideo = new BackgroundVideo('.bv-video', {
        src: [
            'img/01.mp4',
            'img/01.mp4'
        ],
        onReady: function() {
            // Use onReady() to prevent flickers or force loading state
            const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
            vidParent.classList.add('bv-video-wrap--ready');
        }
    });
    </script>

插件链接 - 根据 MIT 许可获得许可

Answer 1

使用媒体查询，很简单。

您需要做的就是在您的 css 中编写一个媒体查询，以最大屏幕宽度显示您的图像并且不为您的视频显示任何内容。还要在媒体查询之外将图像显示设置为无，因此它默认为该设置，直到媒体查询检测到移动屏幕宽度并更改它为止。