Поддерживает ли Video.js медиа-атрибут для изменения источника в соответствии с медиа-запросом?

Я использую video.js для показа видео html5 в адаптивных макетах (используя Настройка Дэйва Руперта для изменения ширины и высоты в соответствии с размером контейнера). Сейчас я работаю над сайтом, который должен будет отображать видео большего размера, где это уместно, и я хотел бы использовать атрибут 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 атрибут media?


video.js html5-video
person john holt ripley    schedule 11.12.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У меня тот же вопрос, и, судя по моим тестам, ответ отрицательный, что делает video.js непригодным для мобильных устройств.

person Rémy DAVID    schedule 08.01.2013

arrow_upward
1
arrow_downward

Чтобы прямо ответить на ваш вопрос, нет. Video.js не поддерживает атрибут media. Опять же, атрибут media для источника следует использовать только в элементе <picture> (MDN).

Но мы можем мыслить нестандартно, чтобы решить вашу основную проблему:

Сейчас я работаю над сайтом, который должен будет обслуживать видео большего размера, где это уместно ... Я хотел бы иметь возможность использовать медиа-запрос, если это возможно, так что, если JS отключен, подходящее видео все равно будет обслуживаться .

Таким образом, думая нестандартно и ища не-js способ решения этой проблемы, мы все еще можем использовать вашу идею медиа-запросов, просто не так, как вы, возможно, предполагали.

Я создал здесь пример, чтобы продемонстрировать, что я собираюсь сделать объяснять.

Вам нужно будет добавить определенное имя класса или идентификатора к различным тегам <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;
  }
}

Надеюсь, это поможет решить вашу проблему! Ваше здоровье!

person Pixxl    schedule 18.12.2014