Html 视频背景响应480p 720p 1080p

您好，我正在尝试在后台显示视频，但当窗口变小时，分辨率会发生变化，因为在移动设备和平板电脑上加载的数据会减少

我的视频格式：.mp4-.webm-.ogv-30秒循环

480p-6mb用于移动设备

720p-10mb用于平板电脑

个人电脑的1080p到2k-15mb-25mb

我的CSS：

    video#bgvid-480p {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(images/480p.jpg) no-repeat;
    background-size: cover;
}

    video#bgvid-720p {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(images/720p.jpg) no-repeat;
    background-size: cover;
}

    video#bgvid-1080p {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(images/1080p.jpg) no-repeat;
    background-size: cover;
}

video { 
display: block; 
}

我的代码：

<video autoplay loop poster="images/480p.jpg" id="bgvid-480p">
<source src="medias/480p.webm" type="video/webm">
<source src="medias/480p.mp4" type="video/mp4">
<source src="medias/480p.ogv" type="video/ogg">
</video>

<video autoplay loop poster="images/720p.jpg" id="bgvid-720p">
<source src="medias/720p.webm" type="video/webm">
<source src="medias/720p.mp4" type="video/mp4">
<source src="medias/720p.ogv" type="video/ogg">
</video>

<video autoplay loop poster="images/1080p.jpg" id="bgvid-1080p">
<source src="medias/1080p.webm" type="video/webm">
<source src="medias/1080p.mp4" type="video/mp4">
<source src="medias/1080p.ogv" type="video/ogg">
</video>

---

如果窗口较小，自动更改视频的最佳解决方案是什么。Js还是css？我想保留这段基本代码，但我无法使其正常工作。

您必须使用html5和Javascript的组合。在下面的外部页面中，Chris向您展示了如何用更少的代码完成完全相同的事情。祝你好运

---

嘿，看看本教程：

正如它指出的，您可以使用源的媒体属性，但这对我不起作用。 我想到的是：

window.onload = function() {
    var width = screen.width;

    var quality = "480p";
    if (width > 480 && width <= 720) { quality = "720p"; }
    if (width > 720) { quality = "1080p"; }

    document.getElementById("bgvid").innerHTML = "<source type='video/webm' src='" + quality + ".webm' />\
    <source type='video/mp4' src='" + quality + ".mp4' />\
    <source type='video/ogv' src='" + quality + ".ogv' />";
}

window.onload=function（）{
变量宽度=屏幕宽度；
var-quality=“480p”；
如果（宽度>480和宽度720）{quality=“1080p”；}
document.getElementById（“bgvid”）.innerHTML=”\
\
";
}

在标题中的脚本标记中，以及

<video autoplay loop id="bgvid"></video>

在身体里

这应该是不言自明的

---

Simon

Simon，我测试了你的代码，实际上效果更好，而且非常简单。我刚刚添加了样式块，并将宽度>480更改为380，以显示720p，如果不是的话，iphone5-6将显示480p。现在一切都很完美非常感谢

这是我为那些想得到它的人准备的最终代码

主管部门：

<style type="text/css">
    video#bgvid {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(images/bg-video.jpg) no-repeat;
    background-size: cover;
    }
    video { 
    display: block; 
    }
</style>

<script>
    window.onload = function() {
        var width = screen.width;

        var quality = "480p";
        if (width > 380 && width <= 720) { quality = "720p"; }
        if (width > 720) { quality = "1080p"; }

        document.getElementById("bgvid").innerHTML = "<source type='video/webm' src='medias/" + quality + ".webm' />\
        <source type='video/mp4' src='medias/" + quality + ".mp4' />\
        <source type='video/ogv' src='medias/" + quality + ".ogv' />";
    }
</script>

视频{
位置：固定；右侧：0；底部：0；
最小宽度：100%；最小高度：100%；
宽度：自动；高度：自动；z索引：-100；
背景：url（images/bg video.jpg）不重复；
背景尺寸：封面；
}
视频{
显示：块；
}
window.onload=函数（）{
变量宽度=屏幕宽度；
var-quality=“480p”；
如果（宽度>380和宽度720）{quality=“1080p”}
document.getElementById（“bgvid”）.innerHTML=”\
\
";
}

正文部分：

<video autoplay loop id="bgvid"></video>

---

干杯

应该注意，480和720是视频高度的测量值，而不是宽度。 720p视频宽1280px，高720

因此，对于断点，它应该是：

var quality = "480p";
if (width > 640 && width <= 720) { quality = "720p"; }
if (width > 1280) { quality = "1080p"; }

var-quality=“480p”；
如果（宽度>640和宽度1280）{quality=“1080p”}

---

伟大的代码！只是把它当作一个项目

非常感谢你的链接，它的工作非常完美！我很高兴能帮上忙。：）