Как отображать разные видео в зависимости от размера медиа? - PullRequest
0 голосов
/ 03 июля 2018

Я собираюсь запустить фоновое видео на веб-странице, у меня есть разные видео-файлы для мобильных устройств и один для настольных компьютеров. Я

<video autoplay loop muted playsinline>
  <source src="desktop.mp4" type="video/mp4">
  <source src="desktop.webm" type="video/webm">
  <img src="fallback.jpg" >
</video>

Я видел решение типа медиа-запроса, но насколько я понимаю, оно выходит из спецификации и не поддерживается ios / safari.

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете использовать медиа-запросы для использования src или другого в зависимости от его определения. Проверьте этот пост на CSS-Tricks https://css -tricks.com / video-source-by-size-size / НО, похоже, это не стабильная функция во всех браузерах.

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

В качестве альтернативы, как говорится в сообщении, можно изменить видео src с помощью Javascript в зависимости от размера области просмотра.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...