Question

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

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

480p - 移动设备为6mb

720p - 平板电脑10mb

1080p至2k - 15mb-25mb for pc

我的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，我测试了你的代码，事实上它运行得更好，而且非常简单。我只是添加了样式块并更改了宽度＆gt; 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视频宽1280像素，高720像素。

因此对于断点应该是：

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

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

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

4 个答案: