时间戳

首页 > 解决方案 > 通过 JavaScript matchMedia 切换 HTML 视频源

javascript - 通过 JavaScript matchMedia 切换 HTML 视频源

问题描述

我正在通过 HTML 标签显示视频<video>。我想根据用户屏幕的分辨率提供一个小视频和一个大视频。一个小屏幕应该只下载小视频。不再可能直接在 HTML 中使用 media 属性执行此操作。基于matchMedia我尝试的 JavaScript 解决方案不起作用。

我使用我在 Google 的视频 ( https://youtu.be/j5fYOYrsocs?t=356 ) 中找到的 matchMedia 尝试了以下 JavaScript 代码：

HTML：

<video>
</video>

JavaScript：

var mq = window.matchMedia('(min-width: 480px)');
if (mq.matches) {
video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
}
else {
video.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
}

这段代码虽然只产生一个空白页。看到这支笔：https ://codepen.io/blueslobster/pen/ROQjOv

标签： javascripthtmlhtml5-video

解决方案

您可以简单地使用window.screen对象的width和height属性来获取屏幕的分辨率。

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

尝试使用：

var video = document.getElementById("video");
if (window.screen.width > 480) {
    //video source for resolution greater than 480p
    video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
}else {
    //video source for resolution less than 480p
    video.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
}

推荐阅读