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

Question

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

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

480p - 移动设备 6mb

720p - 平板电脑 10mb

1080p 到 2k - PC 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>

如果 window 较小，自动更改视频的最佳解决方案是什么。 js还是css？我想保留这个基本代码，但我无法让它工作。

Answer 1

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

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

Answer 2

嘿，看看这个教程：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' />";
}

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

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

在 body.

应该是不言自明的！

西蒙

Answer 3

好吧，西蒙，我测试了你的代码，实际上它运行得更好，而且非常简单。我刚刚添加了样式块并将宽度 > 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 4

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

所以断点应该是：

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

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

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

video background responsive 480p 720p 1080p

html

video

background