如何根据window宽度动态切换图片和视频？

Question

我当前的代码显示了一个基于屏幕宽度的独特图像，作为 link 视频。

            <a href="https://www.youtube.com/watch?v=eabq2KCvhYo&feature=youtu.be">
                <picture>
                    <source srcset="/wp-content/uploads/core-images/thumbnails/showreel_clicker_small.png">
                    <source srcset="/wp-content/uploads/core-images/thumbnails/showreel_clicker_medium.png" media="(min-width: 500px)">
                    <source srcset="/wp-content/uploads/core-images/thumbnails/showreel_clicker_large.png" media="(min-width: 850px)">

                    <img src="/wp-content/uploads/core-images/thumbnails/showreel_clicker_large.png" alt="alt text" width="100%" height="100%">
                </picture>
            </a>

我现在一直在尝试用鼠标悬停时播放的预览视频替换最后一张图片 (showreel_clicker_large.png)。我最大的问题是，我不知道如何让视频仅在 window 尺寸大于 850px（可能是桌面宽度）时显示。到目前为止，我使用 media="(min-width:) 进行的相当简单的尝试只是为视频和图像生成了单独的元素。

我认为 JQuery 是必要的，但我在这方面的知识不多。

Answer 1

你可以试试这个：

var screenwidth = $(window).width(); //get browser window resolution
if(screenwidth > 850) {
  //appear video
} else {
}

如何根据window宽度动态切换图片和视频？

How to dynamically switch between image and video based on window width?

html

jquery

image

hover

html5-video