Ä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:

Code: Select all

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;

}

Das ist mein reines Javascript:

Code: Select all

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;

}

In meinem Firefox-Inspektor wird es angezeigt, aber es ist grau. Es wird nicht angezeigt (wird nicht geladen). Hier ist ein Bild:


Ich hoffe, das ist ein guter Weg. Und mein Video wird nicht zweimal geladen.
Bearbeiten:
Das habe ich getan so:

Code: Select all

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

Laden Sie es jetzt zweimal?