Question

我正在通过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

Answer 1

您可以简单地使用 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';
}

Answer 2

您不能简单地将视频引用为video，因为在javascript中，该变量尚未分配任何内容。如果定义了要更改的元素，则它应该起作用：

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

请注意，vid的赋值必须在DOM构建之后进行，因此可以将脚本放在HTML元素之后，或者仅在您知道该元素已创建的点触发，这样引用（例如页面的主体加载事件）

Answer 3

Offbeatmammal是正确的，因为OP似乎忽略了引用视频标签。除了适当引用上述视频外，如果我们打算在调整窗口大小时调整视频，则应“侦听”视口的更改。另外，OP中的视频应反转，请考虑以下几点：

 ... const mQL = window.matchMedia("(min-width: 481px)");

传递给 matchMedia() 方法的媒体查询的意思是：

“当视口宽度为481px或更大时，应用以下规则，表达式，语句等”

因此，当此条件为TRUE时，应加载较大的视频，否则应加载较小的视频：

如果 mQL.matches 然后将更大的视频分配给vid.src 其他分配< em>较小的视频到vid.src

注意：与mQL（最小宽度：481像素）总体匹配的第一个视频（560x278）为TRUE。第二个视频从巨大的视频（854x438，也可以是真实的）更改为适当大小的视频（480x318）。还要注意：原始媒体查询的像素为480px，因为我拥有ATM的最佳替换视频的自然宽度为480px，所以更改为481px。演示和 Pen （ “整页”演示中的演示似乎无效 ，但在 CodePen ，将窗口拖动到481px宽度以下以查看魔术效果

演示1

使用.addListener()

的两个视频

/*
Create a mediaQueryList Object (mQL)
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
*/
const mQL = window.matchMedia("(min-width: 481px)");

/*
Bind a listener to mQL -- triggers when window changes and calls vidSec callback function
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
*/
mQL.addListener(vidSrc);

/*
Call vidSrc() and pass mQL once to set the video src to the initial viewport. This insures
that the correct video is loaded should the viewport be less than 481px wide. Moreover
it's bad UX to start the page with an empty video tag.
*/
vidSrc(mQL);

/*
Callback function passes the mQL...
Reference the video tag...
Ternary: url is the result of [=] 
         if mQL .matches property* is [?]
         equal to or greater than 481px [TRUE]
         "http://techslides.com/demos/sample-videos/small.mp4" 
         [:] else [FALSE]
         "https://html5demos.com/assets/dizzy.mp4" 
Assign url to video .src property...
load() video
*/
/* [*] .matches Property: 
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/matches
*/
function vidSrc(mQL) {
  const vid = document.querySelector("video");
  let url = mQL.matches ? "http://techslides.com/demos/sample-videos/small.mp4" : "https://html5demos.com/assets/dizzy.mp4";
  vid.src = url;
  vid.load();
}

<video></video>

演示2

Pen

三个视频-数组中有多个mediaQueryLists

const mQLs = [
  window.matchMedia(`(max-width: 854px)`),
  window.matchMedia(`(max-width: 481px)`)
];

function vidSrc(mQL) {
  const vid = document.querySelector("video");
  let url;
  if (mQLs[0].matches) {
    url = "http://techslides.com/demos/sample-videos/small.mp4";
  }
  if (mQLs[1].matches) {
    url = "https://html5demos.com/assets/dizzy.mp4";
  }
  if (!mQLs[0].matches && !mQLs[1].matches) {
    url = "http://media.w3.org/2010/05/sintel/trailer.mp4";
  }
  vid.src = url;
  vid.load();
}


for (let i = 0; i < mQLs.length; i++) {
  vidSrc(mQLs[i]);
}

<video></video>

通过JavaScript matchMedia切换HTML视频源

3 个答案:

演示1

演示2

Pen