Переключение источника HTML-видео с помощью JavaScript matchMedia

Question

Я показываю видео через тег HTML <video>. Я хочу поставить маленькое и большое видео в зависимости от разрешения экрана пользователя. Небольшой экран должен загружать только небольшое видео. Это больше невозможно сделать с атрибутом media напрямую в HTML. Решение JavaScript, основанное на matchMedia, которое я пробовал вместо этого, не работает.

Я попробовал следующий код JavaScript, используя matchMedia, который нашел в видео от Google (https://youtu.be/j5fYOYrsocs?t=356):

HTML:

<video>
</video>

JavaScript:

var mq = window.matchMedia('(min-width: 480px)');
if (mq.matches) {
video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
}
else {
video.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
}

Этот код создает только пустую страницу. Смотрите эту ручку: https://codepen.io/blueslobster/pen/ROQjOv

Answer 1

Вы не можете ссылаться на видео просто как video, потому что в javascript эта переменная не была назначена ни для чего. Если вы определяете элемент, который хотите изменить, он должен работать:

<video id="vid"></video>
<script>
var mq = window.matchMedia('(min-width: 480px)');
var vid = document.getElementById("vid")
if (mq.matches) {
    vid.src = 'http://techslides.com/demos/sample-videos/small.mp4';
} else {
    vid.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
} 
</script>

Обратите внимание, что присвоение vid должно произойти после того, как DOM построен, поэтому либо используйте скрипт после элемента HTML, либо запускайте его только в той точке, где вы знаете, что элемент был создан, чтобы на него можно было ссылаться ( например, событие загрузки тела для страницы)

Answer 2

Непревзойденная млекопитающая является верной в том смысле, что, по-видимому, ОП не обратился к тегу видео. В дополнение к правильной ссылке на упомянутое видео, мы должны «прослушивать» изменения в окне просмотра, если мы намерены адаптировать видео при каждом изменении размера окна. Кроме того, видео в OP следует поменять местами, учтите следующее:

 ... const mQL = window.matchMedia("(min-width: 481px)");

Медиа-запрос, переданный методу matchMedia () , означает:

"Примените следующие правила, выражения, операторы и т. Д., Когда ширина области просмотра равна 481px или больше "

Таким образом, когда это условие TRUE, видео большего размера должно быть загружено, в противном случае видео меньшего размера должно быть загружено:

если mQL.matches , то назначить видео большего размера на vid.src остальное назначить видео меньшего размера на vid.src

Примечание: Первое видео (560x278), которое соответствует mQL (min-width: 481px) ergo, равно TRUE. Второе видео было изменено с огромного видео (854x438, что также было бы правдой) на видео соответствующего размера: (480x318). Также обратите внимание: исходный медиазапрос был в 480px и изменен на 481px, потому что лучшее видео для замены, которое у меня есть, имеет естественную ширину 480px. Дальнейшие детали прокомментированы в Демо и Ручка ( Демо в режиме полной страницы не работает , но работает в CodePen , перетащите окно ниже ширины 481 пикселей, чтобы увидеть магию)

Демо 1

Два видео с использованием .addListener()

/*
Create a mediaQueryList Object (mQL)
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
*/
const mQL = window.matchMedia("(min-width: 481px)");

/*
Bind a listener to mQL -- triggers when window changes and calls vidSec callback function
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
*/
mQL.addListener(vidSrc);

/*
Call vidSrc() and pass mQL once to set the video src to the initial viewport. This insures
that the correct video is loaded should the viewport be less than 481px wide. Moreover
it's bad UX to start the page with an empty video tag.
*/
vidSrc(mQL);

/*
Callback function passes the mQL...
Reference the video tag...
Ternary: url is the result of [=] 
         if mQL .matches property* is [?]
         equal to or greater than 481px [TRUE]
         "http://techslides.com/demos/sample-videos/small.mp4" 
         [:] else [FALSE]
         "https://html5demos.com/assets/dizzy.mp4" 
Assign url to video .src property...
load() video
*/
/* [*] .matches Property: 
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/matches
*/
function vidSrc(mQL) {
  const vid = document.querySelector("video");
  let url = mQL.matches ? "http://techslides.com/demos/sample-videos/small.mp4" : "https://html5demos.com/assets/dizzy.mp4";
  vid.src = url;
  vid.load();
}

<video></video>

Демо 2

ручка

Три видео - несколько mediaQueryLists в массиве

const mQLs = [
  window.matchMedia(`(max-width: 854px)`),
  window.matchMedia(`(max-width: 481px)`)
];

function vidSrc(mQL) {
  const vid = document.querySelector("video");
  let url;
  if (mQLs[0].matches) {
    url = "http://techslides.com/demos/sample-videos/small.mp4";
  }
  if (mQLs[1].matches) {
    url = "https://html5demos.com/assets/dizzy.mp4";
  }
  if (!mQLs[0].matches && !mQLs[1].matches) {
    url = "http://media.w3.org/2010/05/sintel/trailer.mp4";
  }
  vid.src = url;
  vid.load();
}


for (let i = 0; i < mQLs.length; i++) {
  vidSrc(mQLs[i]);
}

<video></video>

Answer 3

Вы можете просто использовать width и height объекта window.screen , чтобы получить разрешение экрана.

<video id="video"></video>

Попробуйте использовать:

var video = document.getElementById("video");
if (window.screen.width > 480) {
    //video source for resolution greater than 480p
    video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
}else {
    //video source for resolution less than 480p
    video.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
}