0

我正在使用 video.js 在响应式布局中提供 html5 视频（使用Dave Rupert 的调整来改变宽度和高度以适应容器）。我现在正在开发一个需要在适当情况下提供更大视频的网站，我想使用 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 属性？

4

2 回答 2

1

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

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

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

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

我在这里创建了一个示例来演示我将要解释的内容。

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

从那里，您可以简单地@media在 CSS 文件中添加适当的定义来隐藏或显示特定视频。

.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;
  }
}

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

于 2014-12-18T23:23:07.727 回答
1

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

于 2013-01-08T10:55:01.090 回答