MYETV Video Player Open Source

Vorstellung des MYETV-Players

Der MYETV-Videoplayer ist ein moderner, HTML5-basierter Medienerlebnis, der für einen schnellen Start, eine saubere Benutzeroberfläche und eine tiefe Anpassung auf Web- und TV-Oberflächen entwickelt wurde, und setzt damit die lange Entwicklung der Plattform von früheren HTML5-Playern zu einem vollständig offenen, erweiterbaren Tool fort. Er basiert auf standardmäßigen Webtechnologien und unterstützt Untertitel, Kapitel, Themes, Plugins und eine dokumentierte JavaScript-API, damit Teams ihn zuverlässig über Geräte hinweg integrieren, branden und erweitern können. Der Code wird unter der MIT-Lizenz als Open Source im offiziellen GitHub-Repository veröffentlicht, um eine Community-Prüfung, -Beiträge und -Wiederverwendung zu fördern.

GitHub-Link: https://github.com/OskarCosimo/myetv-video-player-opensource/

Demo-Link: https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html

MIT-Lizenz im Überblick

Die MIT-Lizenz ist eine kurze, permissive Open-Source-Lizenz, die die Verwendung, Kopie, Modifizierung, Verteilung, Unterlizenzierung und den kommerziellen Gebrauch ermöglicht, sofern der ursprüngliche Urheberrechts- und Lizenzhinweis beibehalten wird. Software- [Program/Software: the instructions that control what a computer does; computer programs] - wird “wie besehen” ohne Garantien oder Haftung bereitgestellt, was eine klare und leichte Einhaltung für Einzelentwickler und Unternehmen gewährleistet. Diese Kombination aus Flexibilität und Einfachheit ist ein wichtiger Grund, warum die MIT-Lizenz eines der beliebtesten Lizenzen für Open-Source-Projekte ist.

Warum Open Source?

Die Freigabe des Players unter MIT ermöglicht eine transparente Entwicklung, reduziert das Risiko von Vendor-Lock-in und ermöglicht Community-basierte Verbesserungen, einschließlich Plugins und Integrationen, die von lebhaften Ökosystemen inspiriert sind, die in weit verbreiteten HTML5-Playern zu sehen sind. Eine permissive Lizenz erleichtert das Einbetten des Players in kommerzielle oder proprietäre Stacks, während gleichzeitig Beiträge zu Fehlerbehebungen oder Verbesserungen gewünscht werden. Dieser Ansatz stimmt mit der Entwicklung von Wiedergabe- und UI-Funktionen durch MYETV für verschiedene Umgebungen überein.

Kernarchitektur

Der Player basiert auf HTML5-Medien und standardmäßigen Web-APIs und bietet eine breite Kompatibilität und eine einfache Bereitstellung in modernen Browsern und Web-Views. Dank standardsbasierter Tracks und Controls unterstützt er Untertitel, Kapitel und UI-Verbesserungen ohne proprietäre Runtime-Abhängigkeiten. Das Ergebnis ist ein vorhersagbares Verhalten, Erweiterbarkeit und eine stabile Basis für benutzerdefinierte Funktionen und Leistungsoptimierungen.

JavaScript-Optionen

• Wiedergabe-Initialisierung: Source-URL(s), Autoplay, Preload, Loop, Muted, Playsinline, Brand-Logos, Wassermarks-Logos und Poster-Mirror sind bekannte HTML5-Eigenschaften für eine vorhersagbare Konfiguration.
• UX-Konfiguration: Optionen für die Steuerung der Bedienleiste, die Schaltflächenanordnung, das Tastaturverhalten, Zeitüberschreitungen und Tooltips bieten eine feingranulare Steuerung von Interaktionsmustern.
• Media handling: quality selection, playback-rate menus, and track menus (audio/caption) follow best practices seen in established players and toolkits.
• Event callbacks: onReady, onPlay, onPause, onEnded, onError, onRateChange, onQualityChange, onCaptionChange enable app-level orchestration and analytics hooks.

SCSS und CSS-Theming

Theme-Variablen und CSS-Klassen-Hooks ermöglichen benutzerdefinierte Farben, Typografie, Abstände, Eckenradien und Iconografie, wodurch eine nahtlose Anpassung an Produkt-Markensysteme gewährleistet wird. Mehrere Skins werden über leichte Stylesheets unterstützt, so dass ein einzelner Build unterschiedliche Aussehen für verschiedene Eigenschaften oder Tenants darstellen kann. Branding-Elemente wie ein kleines Ecklogo oder Wasserzeichen können über Optionen oder CSS-Überlagerungen angewendet werden.

Vollständig anpassbare Logos

Der Player verfügt über vollständig anpassbare Markenlogos und Wasserzeichen. Markenlogo: Es befindet sich rechts von der Steuerelemente, es kann links von den Schaltflächen angezeigt werden. Es kann mit einer Bild-URL (empfohlene Größe: Höhe 44px - Breite 120px), einem benutzerdefinierten Link und einer spezifischen Option zum Anzeigen oder Nichtanzeigen festgelegt werden. Wasserzeichen-Logo: Es ist an der gewünschten Stelle auf dem Video positioniert und kann mit einer Bild-URL (empfohlene Größe: Breite: 180px, Höhe: 100px), einem Link, einer Link-Beschriftung und einer Option zum Festlegen seiner Position (oben links, oben rechts, unten links, unten rechts) festgelegt werden.

Logos sind optional, verfügen sich über eine umfangreiche API-Unterstützung und sind bereits als Option bei der Initialisierung des Players eingefügt, sodass kein Plugin erforderlich ist.

Untertitel: VTT und SRT

Der Player unterstützt Textspuren mit WebVTT für Untertitel und Bildunterschriften, einschließlich mehrsprachiger Menüs und Stile, wobei das Standard-Track-Modell verwendet wird, das im Web verwendet wird. WebVTT-Dateien sind einfach zu erstellen und zu warten und eignen sich gut für Untertitel und Kapitel und passen daher gut zu Produktionspipelines. SRT-Workflows, die in SRT erstellt wurden, können durch Konvertierung in VTT oder durch Ingest-Prozesse untergebracht werden, die beide Formate erzeugen, um die Kompatibilität zu maximieren.

Kapitel mit Bildern

Kapitel werden über WebVTT-Kapitelspuren aktiviert, die eine schnelle Navigation durch lange Inhalte mit klaren, beschrifteten Segmenten ermöglichen. Der Player kann visuelle Vorschauen und Bild-Miniaturen neben Kapitel-Einträgen anzeigen, um das Browsen intuitiver und ansprechender für das Publikum zu gestalten. Dieser Ansatz vereinfacht die Inhaltsbearbeitung – Produzenten aktualisieren eine Sidecar-VTT- und Bilddatei und die Kapitel-UI aktualisiert sich automatisch.

Steuerelemente

• Wiedergabe: Wiedergabe/Pause, Suchen, Zurückspulen und Zeitanzeigen sind mit Tastenkombinationen für die effiziente Navigation vorhanden.
• Audio: Stummschaltung/Einschalten und Pegelregler gewährleisten eine konsistente Tonkontrolle, mit optionalen Audiotrack-Menüs, wenn mehrere Spuren vorhanden sind.
• Ansicht: Vollbild und Picture-in-Picture integrieren sich in die Browser-Funktionen und optionale Theater- oder Passform-Modi helfen, das Layout zu passen.
• Qualität und Geschwindigkeit: Bitrate/Qualitätsmenüs und Wiedergabegeschwindigkeitsauswahl bieten dem Benutzer Gestaltungsfreiheit für Netzwerk- und Verständnisprioritäten.
• Untertitel: Ein Untertitelmenü bietet Einschalt-/Ausschalt-Schalter und Track-Auswahl, wobei der Stil den Accessibility-Richtlinien entspricht.
• Überschwemmung: Ein anpassbarer "Mehr"-Menü enthält erweiterte Einstellungen und plugin-basierte Aktionen, um die Benutzeroberfläche auf das Wesentliche zu konzentrieren.

Audio-Player mit Wellenvisualisierung

Der Player kann auch als Audio-Player verwendet werden und verfügt über ein integriertes Audio-Wellenform-Display-System, ohne dass Plugins erforderlich sind; das System kann jedoch weiterhin durch den Aufbau separater Plugins angepasst werden. Zwei Optionen werden beim Initialisieren des Players festgelegt: "audiofile" (true oder false) richtet den Player als Audio-Player ein, während "audiowave" (true oder false) die Audio-Wellenform im Video-Bereich anzeigt.

Plugin-System

Die Plugin-Architektur stellt Lebenszyklus-Hooks, UI-Einspritzpunkte und Ereignis-Abonnements bereit, so dass neue Funktionen hinzugefügt werden können, ohne den Kern zu verändern. Beispiele hierfür sind Analytik-Schwachstellen, Werbeintegrationen über standardisierte SDKs, Wasserzeichen-Überlagerungen und benutzerdefinierte Schaltflächen für domänenspezifische Aktionen. Dies spiegelt erfolgreiche offene Ökosysteme wider, in denen Community-Pakete die Fähigkeiten des Players im Laufe der Zeit erweitern.

Entwickler-API

Eine prägnante API ermöglicht die imperante Steuerung von Play, Pause, Seek, setVolume, setMuted, setPlaybackRate, setSource(s), setTrack(s), und get sowie ready/error Promises für einen reibungslosen Start. Event-Emitter spiegeln HTML5-Semantik wider, so dass App-Code auf Playhead-Änderungen, Puffern, Fehlern, Track-Umschaltungen, Qualitätswechseln und Vollbild-Übergängen reagieren kann. Konfigurationen können über JavaScript oder Datenattribute bereitgestellt werden, wodurch sowohl deklarative als auch programmatische Initialisierungsmuster ermöglicht werden.

Barrierefreiheitsmerkmale

WebVTT-Untertitel und Kapitel-Tracks verbessern die Barrierefreiheit und das Verständnis, während sie eine bedienungsfreundliche Navigation über die Player-Benutzeroberfläche ermöglichen. Klare Fokus-Zustände, gut lesbare Kontraste und einstellbare Untertitel-Stile unterstützen inklusive Erfahrungen voreingestellt. Mehrsprachige Unterstützung folgt den Track-Metadaten und entspricht den Praktiken, die von etablierten Desktop- und TV-Playern verwendet werden.

Theming und Branding im großen Maßstab

Globale CSS-Variablen ermöglichen schnelle Farb- und Schriftart-Wechsel, so dass Marken die Konsistenz ihrer Identität über Player gewährleisten können, die in mehreren Websites oder Apps eingebettet sind. Skinning-Muster bieten eine größere Trennung zwischen Logik und Stil, was die Wartung und die langfristige Design-Iteration vereinfacht. Organisationen können Layouts und Verhaltensweisen durch Themen-Presets standardisieren und gleichzeitig Raum für Seiten-Overrides lassen.

Produktionsworkflows

Die Verwendung von Sidecar-VTT-Dateien für Untertitel und Kapitel vereinfacht die kontinuierliche Veröffentlichung: Editor schicken aktualisierte Textspuren ohne erneutes Kodieren von Medien. Ein ähnliches Muster gilt für Vorschaubilder und Posterbilder, die unabhängig von Videodateien unabhängig voneinander ausgetauscht werden können, um UI-Iteration in schneller Geschwindigkeit zu ermöglichen. Diese Konventionen entsprechen weit verbreiteten Praktiken in professionellen Video-Lieferpipelines.

Warum dieser Ansatz funktioniert

Leichte, auf Standards basierende Player sind einfacher zu debuggen, zu thematisieren und zu erweitern, und sie passen gut zu modernen CI/CD- und Designsystem-Workflows. Eine permissive Lizenz plus eine plugin-freundliche Kernversion ermutigen Beiträge und Integrationen, die sowohl Produktteams als auch die breitere Community zugute kommen. Im Laufe der Zeit erzeugt dieser sich verstärkende Ökosystemeffekt bessere Funktionen, Dokumentation und Stabilität für alle.

Verfügbarkeit

Der Player-Code wird als Open Source unter der MIT-Lizenz im offiziellen GitHub-Repository veröffentlicht, um Issues, Pull Requests und Diskussionen von Entwicklern und Integratoren einzuluden. Die Einfachheit der Lizenz macht es unkompliziert, den Player über Projekte hinweg zu integrieren und gleichzeitig die Namensnennung zu respektieren und den Lizenztext zu erhalten. Dokumentation und Beispiele werden zusammen mit der Veröffentlichung bereitgestellt, um die Akzeptanz und Anpassung zu beschleunigen.

Eine Notiz für MYETV-Nutzer

Dieses Projekt baut auf jahrelangen iterativen Verbesserungen der Wiedergabe auf der MYETV-Plattform auf, einschließlich UI-Anpassungen und Player-Erweiterungen, die Branding und sich ändernde Seh-Erlebnisse unterstützt haben. Das Open Sourcing des Players formalisiert diesen Fortschritt und erleichtert die Übernahme, Erweiterung und Wartung im Web und TV-Umfeld MYETV-Dienste. Dies ist die Grundlage für eine nachhaltige, gemeinschaftsbasierte Roadmap für Funktionen und Integrationen in Zukunft.

Funktionsliste

• HTML5-first Wiedergabe mit auf Standards basierenden Tracks und Steuerelementen für eine breite Browserkompatibilität.
• Untertitel mit WebVTT, Mehrspur-Menüs und produktionsfreundlichen VTT-Autorenschnittstellen; SRT-basierte Workflows unterstützt durch Konvertierung oder Pipelines.
• Kapitel mit beschrifteten Segmenten und optionalen Miniaturansichten für die Navigation über lange Formate.
• Theming über CSS-Variablen, Skins und Markenlemente wie Wasserzeichen oder Ecklogos.
• Umfassende Steuerelemente: Abspielen/Pause, Suchen, Zeit, Lautstärke, Stummschaltung, Untertitel, Qualität, Geschwindigkeit, Vollbild, Picture-in-Picture.
• Plugin-Architektur für Analysen, Werbung, Wasserzeichen und benutzerdefinierte Schaltflächen ohne das Kernsystem zu duplizieren.
• Unterstützung für HLS oder DASH-Streaming für die Kompatibilität mit allen Audio- und Video-Streams
• Klare API für imperative Steuerung, Ereignisse und deklarative Initialisierung über Attribute.
• MIT-lizenziertes Open-Source-Release zur Förderung der Zusammenarbeit und des flexiblen Wiederverwendens.

Schluss

Das Freigeben des MYETV-Players unter der MIT-Lizenz lädt die Community ein, die Form eines fokussierten, schnellen und erweiterbaren Wiedergabeveranstaltungs zu gestalten, auf die Teams in der Produktion vertrauen können. Mit robusten Untertiteln, Kapiteln, Themes, Plugins und einer sauberen API ist es so konzipiert, dass es eine zuverlässige Grundlage für Web- und TV-Anwendungen von heute ist.