Media-Player-Bibliothek ist Open Source

Wir haben unser Toolkit auf Open-Source-Basis bereitgestellt, um benutzerdefinierte Video- und Audioplayer zu erstellen. Das Toolkit bietet minimale React-Rerender, vorgefertigte Komponenten und eine flexible API zum Erstellen Ihrer benutzerdefinierten Komponenten.

Die Welt dreht sich um Videos – und Browser sind eine solide Rakete für diese Reise. Schnell, einfach zu bedienen und mit umfassender Codec-Unterstützung. Das Hinzufügen von Videos zu React-Apps war noch nie so einfach .

Das heißt aber nicht, dass schon alles perfekt ist. Obwohl Bibliotheken wie ReactPlayer die Lücke von Browsern zu React schließen, gibt es noch offene Herausforderungen:

• Günstige Ereignisse: Holen Sie sich alle 50 ms ein Update vom Videoplayer, um Ihre App zu aktualisieren – ohne die App-Leistung zu beeinträchtigen
• Benutzeroberfläche anpassen: Es ist immer noch überraschend kompliziert, einen Player mit eigenem Look & Feel zu erstellen

Wir ermöglichen günstige Events, indem wir den Videostatus in JavaScript spiegeln . Es ist im Grunde das Virtual DOM-Konzept von React, das auf den Videoplayer des Browsers angewendet wird: Die App interagiert mit JavaScript, was viel billiger ist, als auf die DOM-Ebene herunterzugehen. Dies ermöglicht ua, Zuhörer auf hochfrequente Änderungen im Player zu registrieren, z. B. benachrichtigt zu werden, wenn das Video bestimmte Zeitpunkte erreicht.

Um die Benutzeroberfläche anzupassen, haben wir uns vom Zwiebelmodell inspirieren lassen: Sie können den vorgefertigten Player verwenden, der mit allen möglichen Extras wie Bild-in-Bild, Vollbild und hervorgehobenen Segmenten ausgestattet ist. Wenn Sie weitere Anpassungen der Benutzeroberfläche benötigen, können Sie diese Schicht einfach abziehen und Ihren eigenen Player zusammenstellen, indem Sie die vorgefertigten Komponenten zusammenfügen . Benötigen Sie noch mehr Anpassung? Schreiben Sie einfach Ihre eigenen Komponenten, die einfach an Ihren Player angeschlossen werden können.

➡️ Klingt interessant? Gehen Sie zu Github, probieren Sie es aus und teilen Sie uns Ihre Meinung mit:https://github.com/Collaborne/media-player