Изменить источник видео на размере экрана ⇐ Html

[Anonymous]

Я хочу переключить источник видео в зависимости от размера экрана. Так что он загружает небольшое и большое видео. Я надеюсь, что мой сайт работает/загружается быстрее. На данный момент он работает с jQuery, но я хочу его в чистом Javascript. < /P>
my html: < /p>




< /code>
Вот мой код jQuery: < /p>
const mainVideo = $('#myVideo');

const medi = "/videos/ground_540p.mp4";
const large = "/videos/ground_1080p.mp4";

switch ( true ) {

case ($(window).width() >= 1080):
mainVideo.append("");
break;

case ($(window).width() >= 720):
mainVideo.append("");
break;

}
< /code>
Это мой чистый Javascript: < /p>
const mainVideo = document.getElementById("myVideo");

const medi = "/videos/ground_540p.mp4";
const large = "/videos/ground_1080p.mp4";

switch ( true ) {

case window.innerWidth >= 1080:
mainVideo.append("");
break;

case window.innerWidth >= 720:
mainVideo.append("");
break;

}
< /code>
В моем инспекторе Firefox он отображается, но он серый. Он не показывает (не загрузка) Вот изображение:

Надеюсь, это хороший способ .. и мое видео не загружается дважды. < /p>
Редактировать: < /p>

Подробнее здесь: https://stackoverflow.com/questions/793 ... creen-size