Programmiererforum

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;

}

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;

}

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

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]



[/code]
Hier ist mein jQuery-Code:
[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 reines Javascript:
[code]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 (wird nicht geladen). Hier ist ein Bild:
[img]https://i.sstatic.net/Fy46jedV.png[/img]

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




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

[/code]

[b] Laden Sie es jetzt zweimal? [/b]