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

Question

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

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

有没有一种相当简单的方法可以做到这一点？或者我们只是让用户总是使用大文件？

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

视频包含很多文字，因此较大的视频在全屏下看起来确实更好看。虽然它是两倍大。（手刹以 30 质量压缩。）

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

Answer 1

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

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

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

Answer 2

视频标签没有可用的媒体查询。您受困于 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>

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

HTML Video Source element; Specify different vidieo sizes

html

video-streaming

html5-video