响应时将VideoHeader转换为图像

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中编写媒体查询，以最大屏幕宽度显示图像，并且不显示视频。同时将图像显示设置为媒体查询之外的任何一个，因此默认为该媒体查询检测到移动屏幕宽度并更改它。