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

[Anonymous]

Я хочу переключать источник видео в зависимости от размера экрана. Чтобы загружалось маленькое и большое видео. Я надеюсь, что мой сайт будет работать/загружаться быстрее. На данный момент он работает с jQuery, но мне нужен чистый JavaScript.
Мой HTML:

Код: Выделить всё

< /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;

}

Это мой чистый JavaScript:

Код: Выделить всё

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;

}

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


Надеюсь, это хороший способ... и мое видео не загружается дважды.
Изменить:
Я так и сделал вот так:

Код: Выделить всё

I'm sorry; your browser doesn't support HTML video.

он загружается дважды?

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