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

Question

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

我的视频格式：.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？我想保留这个基本代码，但我不能让它工作。

Answer 1

嘿，看看这个教程：https://css-tricks.com/video-source-by-screen-size/

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

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' />";
}

在标题中的脚本标记中，并且

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

在体内。

它应该是不言自明的！

西蒙

Answer 2

Simon，我测试了您的代码，实际上它运行得更好，而且非常简单。我刚刚添加了样式块并将宽度 > 480 更改为 380 以显示 720p，如果不是 iPhone 5-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>

正文部分：

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

干杯！

Answer 3

您必须结合使用 html5 和 Javascript。在下面的外部页面中，Chris 向您展示了如何用更少的代码来做同样的事情。祝你好运！

https://css-tricks.com/video-source-by-screen-size/

Answer 4

需要注意的是，480 和 720 是视频高度的测量值，而不是宽度。 一个 720p 的视频是 1280px 宽 x 720px 高。

所以对于断点应该是：

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

虽然代码很棒！只是用它一个项目。