如何根据媒体大小显示不同的视频？

Answer 1

您可以使用媒体查询来使用 src 或另一个，具体取决于其定义。查看 CSS-Tricks 上的这篇文章 https://css-tricks.com/video-source-by-screen-size/ 但它看起来并不是所有浏览器上的稳定功能。

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

正如帖子所说，另一种选择是根据视口大小使用 Javascript 更改视频 src。

Answer 2

我认为最简单的解决方案是使用 CSS 媒体查询根据屏幕大小显示/隐藏每个视频。

[编辑：根据 ToddPadwick 在评论中的建议，我添加了 CSS 属性“内容可见性”。它仍然处于实验阶段，并且目前与 Safari 不兼容，但它看起来非常有用和有效。]

HTML

<div id="MyHomepage">
    <video muted autoplay loop id="HD-Video">
        <source src="Video_HD1080.mp4" type="video/mp4">
    </video>
    <video muted autoplay loop id="SD-Video">
        <source src="Video_SD600.mp4" type="video/mp4">
    </video>
</div>

CSS

@media screen and (max-width: 1919px) {
    #HD-Video {
        display: none;
        content-visibility: hidden;
    }
}
    
@media screen and (min-width: 1920px) {
    #SD-Video {
        display: none;
        content-visibility: hidden;
    }
}