HTML 视频源元素；指定不同的视频尺寸答案

【问题标题】：HTML Video Source element; Specify different vidieo sizesHTML 视频源元素；指定不同的视频尺寸
【发布时间】：2021-07-17 10:28:06
【问题描述】：

我想将视频嵌入到一个简单的、基本上没有 JavaScript 的网页中。但是我有两个版本，一个是 1920x1080，一个是 960x540。理想情况下，后者应该在较小的嵌入式窗口中使用以节省用户下载，但前者如果他们在 PC 上全屏显示。

我希望在元素上看到一些东西，但找不到。我认为这是一个非常普遍的要求。

有没有相当简单的方法来做到这一点？还是我们只是让用户总是使用大文件？

（一种选择是将小的内联，然后在其后放置完整视频的直接链接，如果用户单击后者，他们将获得完整的分辨率。）

视频包含大量文字，因此较大的视频在全屏时看起来更好。虽然是两倍大。（手刹压缩为 30 质量。）

如果有一些广泛使用的 JavaScript 控件会很好。但我不想依赖大型框架，例如 React 或 Angular。这本质上是一个静态网页。

【问题讨论】：

标签： html video-streaming html5-video

【解决方案1】：

视频标签没有可用的媒体查询。您无法使用 JS 或 HLS 流来在网络上创建响应式视频。

这是一个简单的 JS 示例，可以满足您的需求。

<div id="video"> </div>

<script>

    //get screen width and pixel ratio
    var width = screen.width;
    var smallVideo= <smallvideo>;
    var bigVideo = <bigVideo>;    
    if (width<500){
        console.log("this is a very small screen, no video will be requested");
        }

    else if (width< 1400){
            console.log("let’s call this mobile sized");
            var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +smallVideo +"\"/\>";
            document.getElementById('video').innerHTML = videoTag;
            }
    else{
            var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +bigVideo +"\"/\>";
            document.getElementById('video').innerHTML = videoTag;

    }

</script>

【讨论】：

【解决方案2】：

您期望的“来源”是什么？

我不确定，但也许你可以通过 javascript 处理它。

在html中，只显示前一个视频，然后当用户与之交互时，您可以重定向到后一个视频。

【讨论】：

Source 是 Video 下的元素，您可以在其中指定视频的来源。