2016-09-21 1 views
0

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 macht visibility: 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?

+0

Ich verstehe nicht, was Sie zu tun versuchen. Wenn dein Video vollständig geladen ist, versteckst du es? – codename44

+0

@ codename44 Nachdem mein Video geladen wurde, wird es abgespielt und dann ausgeblendet, nach einer Verzögerung von 0,75 Sekunden. – MaxelRus

Antwort

0

Ereignis loadeddata Mittel:

Der erste Rahmen der Medien fertig geladen ist.

readyState === 4 bedeutet:

genügend Daten verfügbar sind-und die Downloadrate ist hoch genug, dass die Medien durchgespielt, ohne Unterbrechung zu Ende ist.

Sie haben Chancen, dass loadeddata ausgelöst wird, aber readyState ist nicht 4. Da loadeddata nur einmal ausgelöst wird, wird das Video niemals abgespielt.

Sie sollten versuchen, Protokolle zur Überprüfung dieser Annahme hinzuzufügen.

Was würde ich versuchen, ist die folgende:

  • Verwenden <video> mit autoplay
  • Hören Sie auf das playing Ereignis auf dem Video Übergang zu starten
  • Hören Sie auf das ended Ereignis auf dem Video, um es zu verstecken

Referenz für Attribute, Ereignisse und readyState: