Question

我正在使用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.js是否支持媒体属性？

Answer 1

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

Answer 2

直接回答你的问题，没有。 Video.js不支持media属性。同样，源的媒体属性应仅用于<picture>元素(MDN)。

但我们可以在方框外思考解决您的主要问题：

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

所以，在框外思考并寻找解决方案的非js方式，我们仍然可以使用您对媒体查询的想法，而不是以您可能想要的方式。

I have created an example here ，以展示我要解释的内容。

您需要将特定的类或ID名称附加到各种<video>标记，每个标记包含您希望支持的每个特定设备的来源或适当的质量/大小。在本例中，我们将支持智能手机（最小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;
  }
}

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

Video.js是否支持media属性根据媒体查询更改源？

2 个答案: