Ich erstelle eine Website mit einigen Animationen. Einer von ihnen ist die Logoanimation. Es heißt "lbv.mp4". Da es ein gewisses Gewicht hat, gibt es eine Verzögerung bei der automatischen Wiedergabe. Daher entschied ich mich, den Inhalt anzuzeigen, wenn er vollständig geladen ist.HTML5 Video Preload Lösung
Der Plan ist:
- das Video wird geprüft, zum Laden
- das Video starten
- eine Klasse auf das Seitenelement hinzufügen, um die Animation
setTimeout
für die Länge des Videos zu triggern Das machtvisibility: hidden
für den Clip ein statisches Bild darunter zu öffnen.
Das ist besser, im folgenden Code beschrieben:
video.addEventListener('loadeddata', function() {
if (video.readyState === 4) {
video.play();
$('#page').addClass('transition');
document.setTimeout(function(){
video.attr('style', 'visibility: hidden');
}, 750);
}
Das einzige Problem ist, dass ich es nicht bekommen kann weder mit reinen JS arbeiten, weder mit JQuery. Das Video wird nicht geladen, die Klassen werden nicht angegeben. Getestet in Safari, Chrome und Firefox.
Die letzte Frage lautet also: Gibt es eine andere, die es einfacher macht, oder wie ich meine Lösung reparieren kann?
Ich verstehe nicht, was Sie zu tun versuchen. Wenn dein Video vollständig geladen ist, versteckst du es? – codename44
@ codename44 Nachdem mein Video geladen wurde, wird es abgespielt und dann ausgeblendet, nach einer Verzögerung von 0,75 Sekunden. – MaxelRus