通过JavaScript matchMedia切换HTML视频源

Question

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

我使用谷歌( JavaScript )在一个视频中找到的matchMedia，尝试了以下matchMedia代码：

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

离体哺乳动物是正确的，因为它似乎OP忽略了引用视频标记。除了正确引用上述视频之外，如果我们打算在窗口调整大小时调整视频，我们应该“监听”视口的更改。此外，“任择议定书”中的视频应颠倒，考虑以下几点：

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

传递给matchMedia()方法的媒体查询意味着：

当视口宽度为481 is或更大的__时，应用下列规则、表达式、语句等

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

if mQL.matches 然后将较大的视频分配给vid.src 将较小的视频分配给vid.src

注：第一个视频(560x278)与mQL (最小宽度:481 is )匹配的是TRUE。第二个视频从一个巨大的视频(854x438，这也是真的)变成了一个适当大小的视频：(480x318)。另外要注意的是:最初的媒体查询是480 of，改为481 of，因为我拥有的最佳替换视频ATM的自然宽度为480 of。进一步的详细信息在Demo和钢笔中有注释(在完整页面模式下的演示似乎不工作，但在CodePen中是这样的，将窗口拖到481‘t宽度以下以查看魔术)

演示1

使用.addListener()的2视频

​

/*
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

钢笔

三个视频--数组中的多个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>

​

Answer 2

您只需使用和window.screen对象的高度属性即可获得屏幕的分辨率。

<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 3

您不能简单地将视频引用为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元素之后有脚本，要么只在知道元素已经创建以便可以引用的地方触发(例如页面的body of事件)。