Video.js 是否支持 media 属性根据媒体查询改变来源？答案

【问题标题】：Does Video.js support the media attribute to change the source according to the media query?Video.js 是否支持 media 属性根据媒体查询改变来源？
【发布时间】：2012-12-11 11:43:36
【问题描述】：

我正在使用 video.js 在响应式布局中提供 html5 视频（使用 Dave Rupert's tweak 更改宽度和高度以适应容器）。我现在正在开发一个需要在适当情况下提供更大视频的网站，我想使用 media 属性来提供不同的源视频。我可以使用 javascript 来更改源，但如果可能的话，我希望能够使用媒体查询，这样如果 JS 被禁用，那么仍然会提供合适的视频。

我的代码设置如下：

<video id="lightTouchVideo" class="video-js vjs-default-skin" controls preload="none" poster="/Content/images/video-posters/light-touch.jpg" data-setup="{}">
<source src="/Content/video/light-touch-240p.mp4" type='video/mp4'>
<source src="/Content/video/light-touch-240p.webm" type='video/webm'>
<source src="/Content/video/light-touch-240p.ogv" type='video/ogv'>
<source src="/Content/video/light-touch-360p.mp4" type='video/mp4' media="all and (min-width:599px)">
<source src="/Content/video/light-touch-360p.webm" type='video/webm' media="all and (min-width:599px)">
<source src="/Content/video/light-touch-360p.ogv" type='video/ogv' media="all and (min-width:599px)">
</video>

我已经尝试为这两个来源使用非常明显不同的视频，但我只是先获得来源中列出的任何一个。我在最新的 Firefox、Chrome 和 IE 中都试过了，所以我不认为是浏览器不支持 video media 属性（尽管有传言说它正在考虑从规范中删除）。

那么，video.js 是否支持 media 属性？

【问题讨论】：

标签： html5-video video.js

【解决方案1】：

我有同样的问题，从我的测试来看，恐怕答案是否定的，这使得 video.js 无法用于定位移动设备。

【讨论】：

【解决方案2】：

直接回答你的问题，不。 Video.js 不支持 media 属性。再说一次，source 的 media 属性只能用在 <picture> 元素 (MDN) 中。

但我们可以跳出框框思考来解决您的主要问题：

我现在正在开发一个需要在适当情况下提供更大视频的网站... 如果可能的话，我希望能够使用媒体查询，这样如果 JS 被禁用，那么仍然会提供合适的视频。

因此，跳出框框思考并寻找一种非 js 的解决方法，我们仍然可以使用您对媒体查询的想法，只是不是以您可能想要的方式。

I have created an example here 来演示我要解释的内容。

您需要为各种<video> 标签附加一个特定的类或ID 名称，每个标签都包含您希望支持的每个特定设备的来源或适当的质量/尺寸。在本示例中，我们将支持智能手机（最小 320 像素宽度）、平板电脑（最小 768 像素宽度）和台式机（最小 1224 像素宽度）。

从那里，您只需在 CSS 文件中添加适当的 @media 定义即可隐藏或显示特定视频。

.mobile-res, .tablet-res, .desktop-res {
  display: none;
}

/* Smartphones (portrait and landscape) */
@media (min-device-width : 320px) {
  .mobile-res {
    display: block;
  }
}


/* Tablets (portrait and landscape) */
@media (min-width : 768px) {
  .mobile-res {
    display: none;
  }
  .tablet-res {
    display: block;
  }
}

/* Desktops */
@media (min-width : 1224px) {
  .mobile-res,.tablet-res {
    display: none;
  }
  .desktop-res {
    display: block;
  }
}

希望这有助于解决您的问题！干杯！

【讨论】：