通过JavaScript matchMedia切换HTML视频源 [英] HTML video source switching via JavaScript matchMedia

问题描述

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

I am displaying a video via HTML tag <video>. I want to supply a small and a large video depending on the resolution of the users screen. A small screen should then only download the small video. It is no longer possible to do this with the media attribute directly in HTML. The JavaScript solution based on matchMedia I tried instead is not working.

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

I tried the following JavaScript code using matchMedia that I found in a video by Google (https://youtu.be/j5fYOYrsocs?t=356):

HTML:

<video>
</video>

JavaScript:

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

This code only produces a blank page though. See this pen: https://codepen.io/blueslobster/pen/ROQjOv

推荐答案

Offbeatmmamal 是正确的，因为它显示了OP忽略了引用视频标签.除了正确引用所述视频外，我们还应收听"视频.如果我们打算在调整窗口大小时调整视频，则可以更改视口.另外，OP中的视频应反转，请考虑以下几点:

Offbeatmammal is correct in that it appears the OP has neglected to reference the video tag. In addition to a proper reference to said video, we should "listen" for changes to the viewport if we intend to adapt the video whenever the window is resized. Also, the videos in OP should be reversed, consider the following:

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

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

The media query passed to the matchMedia() method means:

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

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

So when this condition is TRUE, the larger video should be loaded, otherwise the smaller video should be loaded:

如果 mQL.matches 然后将更大的视频分配给vid.src else 到vid.src

注意:与mQL(最小宽度:481px)匹配的第一个视频(560x278)是TRUE.第二个视频从巨大的视频(854x438，也可以是真实的)更改为适当大小的视频(480x318).还要注意:原始媒体查询的像素为480px，因为我拥有ATM的最佳替换视频的自然宽度为480px，因此更改为481px. 演示和 笔 ( 整页"模式中的演示似乎无法正常运行 ，但在

Note: The first video (560x278) which matches the mQL (min-width: 481px) ergo is TRUE. The second video was changed from a huge video (854x438 which would also be true) to a video of appropriate size: (480x318). Also of note: the original media query was at 480px and changed to 481px because the best replacement video I have ATM has a natural width of 480px. Further details are commented in Demo and Pen (the Demo in Full Page mode doesn't appear to work but it does in CodePen, drag the window below 481px width to see the magic)

使用.addListener()

Two videos using .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>

三个视频-数组中有多个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视频源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！