如何根据窗口宽度在图像和视频之间动态切换？答案

【问题标题】：How to dynamically switch between image and video based on window width?如何根据窗口宽度在图像和视频之间动态切换？
【发布时间】：2016-09-14 01:57:01
【问题描述】：

我当前的代码根据屏幕宽度显示一个独特的图像，它充当视频的链接。

            <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) 替换为在鼠标悬停时播放的预览视频。我最大的问题是我不知道如何使视频仅在窗口大小大于 850 像素（可能是桌面宽度）时出现。到目前为止，我使用media="(min-width:) 的相当简单的尝试只是导致视频和图像的元素分开。

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

【问题讨论】：

标签： jquery html image hover html5-video

【解决方案1】：

你可以试试这个：

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

【讨论】：

不是一个非常深入的答案，但我已经让我走上了正确的轨道（我认为）。赢家是你。