Ich bin neu bei ReactJS (0.13.1), und ich habe eine Komponente in meiner App erstellt, um HTML5-Video anzuzeigen.
Es scheint perfekt zu funktionieren, aber nur für die erste Auswahl. Das Video, das tatsächlich auf der Seite angezeigt und wiedergegeben wird, ändert sich nicht, wenn Sie von einem Video zu einem anderen wechseln (wenn this.props.video sich ändert).
Ich kann das <source src='blah.mp4' /> elements-Update im Chrome-Inspektor sehen, aber das tatsächlich wiedergegebene Video auf der Seite ändert sich nicht und läuft weiter, wenn es bereits vorhanden war. Das Gleiche passiert in Safari & amp; Feuerfuchs. Alle anderen Elemente werden ebenfalls entsprechend aktualisiert.
Irgendwelche Ideen?
Sowieso meine Komponente unten:
%Vor%UPDATE:
Um es anders zu beschreiben:
Ich habe eine Liste von Links mit onClick-Handlern, die die Requisiten der Komponente festlegen.
Wenn ich zum ersten Mal auf einen Video-Link ("Video Foo") klicke, bekomme ich
%Vor%und "Video Foo" erscheint und kann abgespielt werden.
Wenn ich dann auf den nächsten klicke ("Video Bar"), wird das DOM aktualisiert und ich bekomme
%Vor%Es ist jedoch immer noch "Video Foo" sichtbar und kann abgespielt werden.
Es ist so, als ob der Browser Medien für ein <video> geladen hat und alle Änderungen an den <source> -Elementen ignoriert.
Die Antwort gefunden
Das dynamische Ändern eines Quellenelements und seines Attributs, wenn das Element bereits in ein Video- oder Audioelement eingefügt wurde, hat keine Auswirkungen. Um die Wiedergabe zu ändern, verwenden Sie einfach das src-Attribut auf dem Medienelement direkt und verwenden Sie möglicherweise die Methode canPlayType (), um aus den verfügbaren Ressourcen auszuwählen. Im Allgemeinen ist das manuelle Manipulieren von Quellelementen nach dem Parsen des Dokuments ein unnötig komplizierter Ansatz
Es ist ziemlich hacky und zerbrechlich, aber es hat die Arbeit für meine Fälle erledigt.
%Vor%Ich habe einige Ansätze für einfaches JavaScript hier beschrieben. Darauf basierend habe ich Lösungen für React gefunden, die für mich funktionieren:
Verwenden Sie das Attribut src für das Video selbst:
Danas Antwort ist eine großartige Option, um diese Lösung zu erweitern.
mit .load() Aufruf an Videoelement:
UPD :
natürlich ist es möglich, ein eindeutiges Attribut key für <video> -Tag hinzuzufügen (zum Beispiel basierend auf Ihren Quellen), so dass Quellen geändert werden, wenn sie sich ändern. Aber es wird dazu führen, dass <video> komplett neu gerendert wird und einige UI-Flashs verursachen können.
Ich hatte das gleiche Problem mit der Erstellung einer Playlist mit Videos.
Also habe ich den Videoplayer auf eine andere Reaktionskomponente getrennt und diese Komponente erhielt zwei Requisiten: contentId (Videoidentifikation) & amp; videoUrl (Video-URL).
Ich habe auch eine Referenz zum Video-Tag hinzugefügt, damit ich das Tag verwalten kann.
%Vor%Das ist viel sauberer:
%Vor%Tags und Links javascript html5-video reactjs