Introduzione al lettore MYETV
Il lettore video MYETV è un'esperienza multimediale HTML5 moderna, progettata per un avvio rapido, un'interfaccia utente pulita e una personalizzazione profonda su web e TV, continuando l'evoluzione della piattaforma da vecchi lettori HTML5 a uno strumento completamente aperto ed estendibile. Basato su tecnologie web standard, supporta i sottotitoli, i capitoli, i temi, i plugin e un'API JavaScript documentata, in modo che i team possano integrarlo, personalizzarlo e estenderne la riproduzione in modo affidabile su dispositivi. Il codice sorgente sarà rilasciato come open source con la Licenza MIT nel repository GitHub ufficiale per incoraggiare la revisione della comunità, i contributi e il riutilizzo.
Link GitHub: https://github.com/OskarCosimo/myetv-video-player-opensource/
Link Demo: https://oskarcosimo.com/myetv-video-player/myetv-player-demo.html
Licenza MIT in sintesi
La Licenza MIT è una breve licenza open source permissiva che consente l'uso, la copia, la modifica, la distribuzione, la sottolicienza e l'uso commerciale, a condizione che il copyright originale e la notifica della licenza siano conservati. Il software- [Program/Software: the instructions that control what a computer does; computer programs] - è fornito “così com’è”, senza garanzie o responsabilità, il che rende chiari e leggeri i requisiti di conformità per singoli sviluppatori e aziende. Questa combinazione di flessibilità e semplicità è una delle ragioni per cui la MIT è una delle licenze più popolari per i progetti open source.
Perché open source
Rendere il lettore disponibile con la licenza MIT abilita uno sviluppo trasparente, riduce il rischio di blocco del fornitore e consente miglioramenti guidati dalla comunità, inclusi plugin e integrazioni ispirate a vivaci ecosistemi visti in lettori HTML5 ampiamente utilizzati. La licenza permissiva rende facile incorporare il lettore in stack commerciali o chiusi, contribuendo ancora alla risoluzione dei bug o dei miglioramenti desiderati. Questo approccio si allinea alla storia di MYETV di evoluzione delle capacità di riproduzione e dell'interfaccia utente per ambienti diversi.
Architettura principale
Il lettore si basa su media HTML5 e API web standard, fornendo una compatibilità ampia e un'implementazione semplice su browser e visualizzazioni web moderne. Grazie a tracce e controlli basati su standard, supporta sottotitoli, capitoli e miglioramenti dell'interfaccia utente senza dipendenze runtime proprietarie. Il risultato è un comportamento prevedibile, estendibilità e una base stabile per funzionalità e ottimizzazione delle prestazioni personalizzate.
Opzioni JavaScript
- Inizializzazione della riproduzione: URL della sorgente (s), autoplay, preload, loop, muted, playsinline, loghi del marchio, loghi dell'acqua marziale e specchio del poster per una configurazione prevedibile.
- Configurazione dell'interfaccia utente: opzioni per la visibilità della barra di controllo, il layout dei pulsanti, il comportamento della tastiera, i timeout di inattività e le didascalie forniscono un controllo preciso dei modelli di interazione.
- Media handling: qualità di riproduzione, menu di velocità di riproduzione e menu di traccia (audio/sottotitoli) seguono le migliori pratiche viste nei player e toolkit consolidati.
- Callback eventi: onReady, onPlay, onPause, onEnded, onError, onRateChange, onQualityChange, onCaptionChange consentono l'orchestrazione a livello di applicazione e gli hook di analisi.
SCSS e CSS tematizzazione
Le variabili del tema e gli hook delle classi CSS consentono colori, tipografia, spaziatura, raggi angolari e iconografia personalizzati, consentendo un'allineamento senza soluzione di continuità con i sistemi di branding del prodotto. Sono supportate più skin tramite fogli di stile leggeri in modo che un singolo build possa presentare diversi look per proprietà o tenant. Gli elementi di branding come un piccolo logo nell'angolo o un watermark possono essere applicati tramite opzioni o sovrapposizioni CSS.
Loghi completamente personalizzabili
Il player presenta loghi e watermark completamente personalizzabili. Logo Brand: Situato a destra della barra di controllo, può essere visualizzato a sinistra dei pulsanti. Può essere impostato con un URL di immagine (dimensione consigliata: altezza 44px - larghezza 120px), un link personalizzato e c'è un'opzione specifica per abilitarlo o meno. Watermark Logo: Posizionato come desiderato sul video, può essere impostato con un URL di immagine (dimensione consigliata: larghezza: 180px, altezza: 100px), un link, una didascalia del link e c'è un'opzione per impostare la sua posizione (angolo in alto a sinistra, angolo in alto a destra, angolo in basso a sinistra, angolo in basso a destra).
I loghi sono opzionali, hanno un'ampio supporto API e sono già inseriti come opzione quando il player si inizializza, quindi non è necessario alcun plugin.
Sottotitoli: VTT e SRT
Il player supporta tracce di testo con WebVTT per sottotitoli e didascalie, inclusi menu multilingue e stile, sfruttando il modello di traccia standard utilizzato in tutta la web. I file WebVTT sono facili da creare e mantenere e sono ben adatti sia per sottotitoli che per capitoli, rendendoli un buon adattamento per i flussi di lavoro di produzione. I workflow che originano da SRT possono essere accomodati convertendoli in VTT o utilizzando processi di ingest che producono entrambi i formati per la massima compatibilità.
Capitoli con immagini
I capitoli sono abilitati tramite tracce di capitolo WebVTT, consentendo una navigazione rapida attraverso contenuti a lunga durata con segmenti chiari e contrassegnati. Il player può visualizzare anteprime visive e miniature di immagini accanto alle voci di capitolo per rendere la navigazione più intuitiva e coinvolgente per il pubblico. Questo approccio semplifica l'editing dei contenuti: i produttori aggiornano un file VTT e immagini laterali e l'interfaccia utente dei capitoli si aggiorna automaticamente.
Pulsanti della barra di controllo
- Riproduzione: play/pause, seek, replay e visualizzazioni del tempo sono presenti con scorciatoie da tastiera per la navigazione efficiente.
- Audio: disattivazione/attivazione e cursore del volume assicurano il controllo del suono coerente, con menu di traccia audio opzionali quando sono presenti più tracce.
- Visualizzazione: schermo intero e picture-in-picture integrano con le capacità del browser e modalità teatro o adattamento opzionali aiutano ad adattare le esigenze di layout.
- Qualità e velocità: menu bitrate/qualità e selezione della frequenza di riproduzione forniscono all'utente un certo grado di controllo per le preferenze di rete e di comprensione.
- Sottotitoli: un menu dei sottotitoli fornisce interruttori on/off e selezione del traccia, con uno stile allineato alle linee guida di accessibilità.
- Sovraccarico: un menu “altro” personalizzabile ospita impostazioni avanzate e azioni guidate dai plugin per mantenere l'interfaccia utente concentrata.
Lettore audio con visualizzazione a onde
Il lettore può anche essere utilizzato come lettore audio solo e dispone di un sistema di visualizzazione a onde audio integrato senza la necessità di alcun plugin; il sistema può comunque essere personalizzato costruendo plugin separati. Due opzioni sono impo quando il lettore viene inizializzato: “audiofile” (true o false) imposta il lettore come lettore audio, mentre “audiowave” (true o false) visualizza la visualizzazione a onde audio nello spazio video.
Sistema di plugin
L'architettura del plugin espone hook di ciclo di vita, punti di iniezione dell'interfaccia utente e abbonamenti agli eventi in modo che nuove funzionalità possano essere aggiunte senza creare fork del core. Esempi includono beacon di analisi, integrazioni pubblicitarie tramite SDK standardizzati, sovrapposizioni di watermark, e pulsanti personalizzati per azioni specifiche del dominio. Questo riflette ecosistemi aperti di successo in cui i pacchetti della comunità espandono le capacità del lettore nel tempo.
API per sviluppatori
Un'API concisa consente il controllo imperativo di riproduzione, pausa, ricerca, volume, disattivazione, frequenza di riproduzione, origine, traccia, stato e promesse ready/error per un avvio senza problemi. Gli emettitori di eventi riflettono la semantica HTML5 in modo che il codice dell'app possa reagire ai cambiamenti del playhead, al buffering, agli errori, alle toggle delle traccia, agli interruttori di qualità e alle transizioni dello schermo intero. La configurazione può essere fornita tramite JavaScript o attributi di dati, consentendo sia modelli dichiarativi che programmatici di inizializzazione.
Funzionalità di accessibilità
WebVTT sottotitoli e traccia dei capitoli migliorano l'accessibilità e la comprensione consentendo la navigazione tramite tastiera nell'interfaccia utente del lettore. Stati di focus chiari, contrasto leggibile e stili di sottotitoli regolabili supportano esperienze inclusive per impostazione predefinita. Il supporto multilingue segue i metadati della traccia e si allinea con le pratiche utilizzate dai lettori desktop e TV consolidati.
Temi e branding su larga scala
Le variabili CSS globali consentono rapidi scambi di colore e tipografia in modo che i marchi possano mantenere una identità coerente nei lettori incorporati in più siti o app. I modelli di skinning forniscono una maggiore separazione tra logica e stile, semplificando la manutenzione e l'iterazione di progettazione a lungo termine. Le organizzazioni possono standardizzare layout e comportamenti tramite preset di tema preservando al contempo le sovrapposizioni per pagina. Questi convenzioni si allineano con le pratiche ampiamente adottate nei pipeline di distribuzione video professionali.
Flussi di lavoro di produzione
L'utilizzo di file VTT a lato per i sottotitoli e i capitoli semplifica la pubblicazione continua: gli editor inviano tracce di testo aggiornate senza ri-codificare i media. Un modello simile si applica alle miniature di anteprima e alle immagini di poster, che possono essere scambiate indipendentemente dai file video per un'iterazione rapida dell'interfaccia utente. Queste convenzioni si allineano con le pratiche ampiamente adottate nei pipeline di distribuzione video professionali.
Perché questo approccio funziona
I giocatori basati su standard e a basso consumo energetico sono più facili da debuggare, personalizzare e estendere, e si adattano bene ai flussi di lavoro CI/CD moderni e ai sistemi di progettazione. Una licenza permissiva, unita a un core compatibile con i plugin, incoraggia i contributi e le integrazioni che beneficiano sia i team di prodotto che la comunità più ampia. Nel tempo, questo effetto composto dell'ecosistema produce funzionalità, documentazione e stabilità migliori per tutti.
Disponibilità
Il codice del giocatore sarà pubblicato come open source con la Licenza MIT nel repository GitHub ufficiale, invitando problemi, richieste di pull e discussioni da parte di sviluppatori e integratori. La semplicità della licenza rende semplice l'incorporazione del giocatore in vari progetti, rispettando l'attribuzione e preservando il testo della licenza. La documentazione e gli esempi accompagneranno il rilascio per accelerare l'adozione e la personalizzazione.
Un appunto per gli utenti MYETV
Questo progetto si basa su anni di miglioramenti iterativi nella riproduzione su MYETV, inclusi la personalizzazione dell'interfaccia utente e le estensioni del giocatore che hanno supportato il branding e le esperienze di visualizzazione in evoluzione. La pubblicazione in open source del giocatore formalizza questo progresso e rende più facile l'adozione, l'estensione e la manutenzione su web e TV. MYETV serve come base per una roadmap sostenibile e guidata dalla comunità per le funzionalità e le integrazioni future.
Elenco delle funzionalità
- Riproduzione HTML5 con tracce e controlli basati su standard per la compatibilità con un'ampia gamma di browser.
- Sottotitoli con WebVTT, menu a più tracce e flussi di lavoro di creazione VTT compatibili con la produzione; supportati i flussi di lavoro SRT tramite conversione o pipeline.
- Capitoli con segmenti etichettati e anteprime a thumbnail opzionali per la navigazione a lungo formato.
- Tematizzazione tramite variabili CSS, skin ed elementi di branding come watermark o loghi nell'angolo.
- Controlli completi: riproduci/pausa, cerca, tempo, volume, disattivazione, sottotitoli, qualità, velocità, schermo intero, modalità finestra a finestra.
- Architettura del plugin per l'analisi, la pubblicità, i watermark e i pulsanti personalizzati senza modificare il core.
- Supporta lo streaming HLS o DASH per la compatibilità con tutti i flussi audio/video.
- API chiara per il controllo imperativo, gli eventi e l'inizializzazione dichiarativa tramite attributi.
- Rilascio open source con licenza MIT per incoraggiare la collaborazione e il riutilizzo flessibile.
Conclusione
Rilasciando il lettore MYETV sotto la licenza MIT invita la comunità ad aiutare a modellare un'esperienza di riproduzione focalizzata, veloce e estendibile che i team possano fidarsi in produzione. Con didascalie robuste, capitoli, temi, plugin e un'API pulita, è progettato per essere una base affidabile per le applicazioni web e televisive di oggi.
