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

Question

我打算在网页上运行背景视频，我有不同的移动视频文件和一个桌面视频文件。我

<video autoplay loop muted playsinline>
<source src="desktop.mp4" type="video/mp4">
<source src="desktop.webm" type="video/webm">
<img src="fallback.jpg" >
</video>

我已经看到了一个媒体查询类型的解决方案，但据我所知，它超出了规格，并且不受ios/safari的支持。

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 媒体查询根据屏幕大小显示/隐藏每个视频。

.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;
}
}

@media screen and (min-width: 1920px) {
#SD-Video {
display: none;
}
}