Ändern Sie die Videoquelle entsprechend der Bildschirmgröße ⇐ HTML

[Guest]

Ich möchte die Quelle eines Videos je nach Bildschirmgröße wechseln. So dass es ein kleines und ein großes Video lädt. Ich hoffe, dass meine Website schneller ausgeführt/lädt. Im Moment arbeitet es mit JQuery, aber ich möchte es in reinem JavaScript.

Code: Select all

Hier ist mein jQuery-Code:
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>
Das ist mein reiner 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>
In meinem Firefox -Inspektor wird es angezeigt, aber es ist grau. Es wird nicht angezeigt (nicht laden). Hier ist ein Bild:

Ich hoffe, das ist ein guter Weg .. und mein Video wird nicht zweimal geladen. < /p>
Bearbeiten: < /p>