根据屏幕大小提供不同的视频 HTML

Question

我想在网站中使用视频作为背景，但我想提供一个较小的剪辑版本，这样手机就不必下载完整版本和浪费带宽。 我该怎么做？

我尝试了以下方法，但浏览器在只显示一个之前下载了两个。 我希望浏览器只下载一个视频

<video controls>
    <source src="b.mp4" type="video/mp4" media="screen and (max-width: 800px)">
    <source src="a.mp4" type="video/mp4" media="screen and (min-width: 801px)">
</video>

提前致谢

Answer 1

由于没有其他方法可以显示/隐藏不同分辨率的视频，您可以使用 JS 或 jQuery，试试这个解决方案（根据需要修改）

var video = $('#yourVideoId');

var width = $(window).width();

if (width < 1200) {
    //It is a small screen
    video.append("<source src='yourVideoSrc' type='video/mp4' >");
} else {
    //It is a big screen or desktop
    video.append("<source src='yourVideoSrc' type='video/mp4' >");
}

Answer 2

查看下面的示例代码是否正在执行您想要的操作。
它使用 JavaScript 检查设备的屏幕宽度，并根据大小为<video>标签设置 URL。 video 标签通过它的id访问。 作为起点，它有一个假的/空的 URL（后来由代码更新）。

<!DOCTYPE html>
<html>
<body>

<video id="myvid" controls>
    <source src="nothing.mp4" type="video/mp4">
</video>

</body>

<script>

window.onload = (event) => { myFunction( event ) };

function myFunction( event ) 
{
  alert("Screen Width is: " + screen.width);
  
 let myvid = document.getElementById("myvid");
 
 //# if BIGGER THAN the 800 pixels
 if ( screen.width > 800 ) { myvid.src = "a.mp4"; }
 
 //# if SMALLER THAN or EQUAL-TO the 800 pixels
 if ( screen.width <= 800 ) { myvid.src = "b.mp4"; }
 
 //# load URL (for playback)
 myvid.load();
  
}

</script>

</html>