Come ospitare e incorporare un flusso live HLS sul proprio sito web

Con la continua evoluzione degli standard di settore per la riproduzione video, si evolve anche la tecnologia di tecnologia di streaming live. Nuove funzionalità come lo streaming HLS spingono ancora più in là l’esperienza degli spettatori, offrendo loro una qualità di visione fluida e costante, indipendentemente dalla posizione in cui si trovano rispetto alla vostra postazione di trasmissione!

Con la scomparsa dei lettori Flash e l’aumento dei video in video HTML5 HTML5, abbiamo assistito allo sviluppo di nuovi protocolli di streaming, compreso lo streaming live HTTP (HLS). Questo miglioramento ha migliorato l’esperienza di visione online di milioni di persone che guardano spesso i video.

In questo post discuteremo tutto ciò che c’è da sapere sull’incorporazione dei flussi HLS. Inizieremo inizieremo rivedendo le basi del lettore video incorporato tecnologia prima di immergersi nel protocollo di streaming HLS e nella relativa tecnologia. Allora, discuteremo come incorporare un flusso HLS.

Per concludere, tracciare un collegamento tra tracciare il collegamento tra HLS e M3U8 e fornire ulteriori informazioni su come le due cose funzionano insieme.

Indice dei contenuti

• Incorporazione del lettore video: Cosa c’è da sapere
• Che cos’è un lettore video HTML5?
• Che cos’è l’HLS?
• Streaming HLS e ingest RTMP: L’impostazione ottimale per lo streaming
• Come incorporare un flusso HLS
• Come incorporare più lettori video in una pagina
• Hosting video gratuito vs. Hosting video a pagamento
• Il collegamento tra HLS e M3U8
• Alternativa HLS: MPEG-DASH
• Iniziare a ospitare flussi live HLS sul proprio sito

Incorporazione del lettore video: Cosa c’è da sapere

Un lettore video è un software per la distribuzione di contenuti multimediali rivolto all’utente. programma che consente agli spettatori di accedere a contenuti video digitali. A incorporare un lettore video è quello di aggiungere il software a a pagina che si rivolge all’utente, sia è su un’app, un sito web o un’e-mail. L’incorporazione richiede la modifica del codice dell’e-mail o della pagina web per incorporare il codice del lettore video.

In parole poverequando si guarda un video sul computer su Youtube, il rettangolare La sezione dello schermo in cui si guarda il contenuto è il lettore video. Il browser più grande Lo spazio intorno al lettore video è la pagina web in cui il lettore è stato incorporato.

Imparare a incorporare un lettore video in una pagina web può sembrare complesso se non si hanno conoscenze tecniche. Ma un video–piattaforma di hosting video può rendere il tutto più semplice e veloce.

Un video di terzi–di terze parti memorizzerà i file video, fornirà i contenuti e vi aiuterà a personalizzare il player in modo da poterlo incorporare nel vostro sito. vostro sito web sito web e iniziare a trasmettere oggi stesso.

Perché incorporare un lettore video?

Molte emittenti professionali scelgono di incorporare un lettore video sul proprio sito piuttosto che inviare gli spettatori a un sito come YouTube. Le ragioni sono molteplici, tra cui un migliore controllo del branding e dell’estetica.

Con una soluzione di streaming a marchio biancoÈ possibile sostituire un logo di terzi con il proprio. È inoltre possibile eliminare altri elementi di distrazione, come i “video suggeriti” di altri creatori ed emittenti. In questo modo è possibile elevare i propri video conferendo loro un aspetto più professionale.

Quando si impara a incorporare il lettore video, si possono curare le pagine e i lettori video in modo da riflettere il proprio marchio e ottenere le conversioni desiderate. Questo può includere l’aggiunta di loghi o altri elementi di design che riflettano il vostro marchio. Qualcosa di semplice come una combinazione di colori o la scelta di un carattere può fare molto per il branding.

Le soluzioni di terze parti per l’incorporamento dei video tendono inoltre a essere dotate di strumenti di branding, marketing e analisi propri. Questo può essere molto limitante, e a volte persino controproducente, per i vostri obiettivi di marketing.

I lettori embedded white-label o comunque non brandizzati offrono la massima libertà di raccogliere e interpretare i dati di marketing nel modo più vantaggioso per voi e per la vostra azienda.

Che cos’è un lettore video HTML5?

Il Lettore video HTML5 è è il lettore video più diffuso per lo streaming video online. È noto per la sua ampia compatibilità. I lettori video HTML5 sono i più l’opzione più diffusa nello streaming online.

Come abbiamo detto, il player Flash è morto. Sebbene abbia avuto una funzione importante per molto tempo, questo lettore video non era compatibile con lo streaming mobile. La rapida crescita di popolarità degli iPhone e di altri smartphone ha creato l’esigenza di un lettore video compatibile con questi dispositivi. Il Il lettore video HTML5 è stato creato per soddisfare questa richiesta.

I lettori video HTML5 sono molto interessanti per le emittenti perché la loro compatibilità universale consente di raggiungere il pubblico più vasto possibile. Non c’è non c’è la preoccupazione di escludere gli spettatori che utilizzano dispositivi specifici e vogliono accedere ai contenuti video HTML5.

Il lettore video HTML5 è facile da personalizzare e incorporare nei siti web e applicazioni. Questo lo rende prezioso per le aziende che desiderano brandizzare i propri contenuti video.

Sebbene HTML5 sia cresciuto in popolarità nell’ultimo decennio, è diventato ufficialmente l’unico lettore video ampiamente supportato quando Chrome e altri browser web hanno eliminato definitivamente il lettore Flash.

I lettori video HTML5 sono compatibili con tutti i principali browser, tra cui Internet Explorer, Firefox, Safari e Chrome. Funzionano anche su dispositivi mobili, come iPhone, iPad, telefoni e tablet Android.

Inoltre, il lettore video HTML5 è compatibile con tutti i principali sistemi operativi, compresi Windows, Mac e Linux. È inoltre compatibile con tutti i principali formati video, tra cui MP4, WebM e Ogg.

Che cos’è l’HLS?

Il protocollo HTTP Live Streaming (HLS) è stato sviluppato da Apple nel 2009 per fornire contenuti video ai lettori video HTML5. Questo protocollo ha sostituito RTMP for delivery, lo standard per lo streaming su Flash player.

Uno dei problemi principali legati all’utilizzo di Flash su un dispositivo mobile è che dispositivi mobili tendono a muoversi. Flash è stato progettato per funzionare con una connessione costante a Internet. I dispositivi mobili richiedono molta più flessibilità di un PC con una connessione via cavo a Internet.

HLS è un protocollo di streaming a bitrate adattivo. Ciò significa che consente streaming video reattivo e può regolare automaticamente la qualità di un video in base alla velocità di internet dello spettatore. Si tratta di una novità assoluta perché migliora l’esperienza dell’utente, dato che lo streaming HLS adattivo è progettato per ridurre il buffering e il lagging.

HLS può essere utilizzato sia per l’ingest che per il delivery. Tuttavia, c’è non ci sono molti codificatori HLS sul mercatoquindi HLS ingestione non è ancora ampiamente adottato.

Streaming HLS e ingest RTMP: L’impostazione ottimale per lo streaming

Sebbene Flash sia ormai un ricordo del passato, il protocollo di messaggistica in tempo reale (RTMP)è ancora vivo e vegeto. Svolge un ruolo molto importante nel processo di streaming HLS. L’ingest RTMP è ora comunemente utilizzato come protocollo di ingestione video predefinito, il che significa è responsabile del trasporto dei video al hosting video piattaforma di hosting video o alla rete di distribuzione dei contenuti (CDN).

La combinazione di streaming HLS e consegna RTMP è attualmente la configurazione di streaming più ottimale. configurazione di streaming più ottimale. Il protocollo HLS dà alle emittenti l’accesso al ampiamente adattabile codificatore HTML5 mentre RTMP fornisce l’accesso a uno streaming a bassa latenza. streaming a bassa latenza, encoder economici e altro ancora. Questo duo è anche il più sicuro modo più sicuro.

Anche se la configurazione di hosting RTMP è attualmente il metodo preferito, non c’è non si può dire fino a quando sarà così. I protocolli di streaming video in diretta si evolvono costantemente e a un ritmo sempre più veloce.

Come incorporare un flusso HLS

Incorporare un flusso HLS sul proprio sito web non è troppo difficile. Questo processo è piuttosto semplice con la giusta lettore video online (OVP) ed editor di siti web.

Ai fini di questo tutorial, si presuppone che abbiate già prodotto contenuti video e che abbiate costruito un sito web..

Vediamo le 5 fasi che le emittenti devono seguire per incorporare un flusso HLS nei loro siti web.

1. Scegliere una piattaforma video online (OVP)

Per incorporare un flusso HLS, è necessario investire in una piattaforma video online che supporti il software HLS.. Deve anche offrire un lettore video incorporabile.

Le aziende e le altre organizzazioni professionali dovrebbero investire in una soluzione a pagamento piuttosto che affidarsi a piattaforme gratuite come YouTube e DailyMotion. Abbiamo già parlato di alcuni motivi, come la possibilità di aggiungere il proprio marchio ed evitare di distrarre gli spettatori con i contenuti di altri creatori.

Senza entrare troppo nel dettaglio, alcuni elementi da considerare quando si sceglie la piattaforma video online includono i seguenti:

• Supporto alla monetizzazione: A differenza di Dacast (che supporta i video in abbonamento su richiestao SVOD), video on demand basato su pubblicità (AVOD) e transazionale video su richiesta (TVOD), alcune piattaforme non supportano la monetizzazione o supportano solo una o due opzioni. Ci sono molti modi per monetizzare i contenuti e la finestra di opportunità è sempre più ampia. Non lasciate che le piattaforme restrittive vi privino di guadagni monetari potenzialmente redditizi per i vostri contenuti.
• Rapporti con le CDN: Se volete assicurarvi che i vostri contenuti siano sempre distribuiti con la massima qualità possibile in ogni parte del mondo, sappiate che le CDN svolgono un ruolo fondamentale nella distribuzione affidabile dei contenuti. Queste reti sono in grado di memorizzare nella cache ampie sezioni di flussi di contenuti video in varie posizioni dei server. Questo permette di distribuire i contenuti agli utenti in modo ottimale ed efficiente ogni volta che li richiedono.
• Funzioni di protezione video: Al giorno d’oggi è fin troppo comune che i video vengano rubati e distribuiti senza un‘ adeguata protezione. consenso. Cercate caratteristiche come DRM, watermarking, controllo del dominio, limitazioni geografiche.e la sicurezza generale della piattaforma.
• Assistenza clienti: Alcune piattaforme offrono un’assistenza minima sui piani più economici, mentre altre offrono un’assistenza di prim’ordine su tutti i piani. Ironia della sorte, molti marchi di alto livello offrono solo un servizio clienti scadente. Di solito questo accade perché la base di clienti ha superato le risorse dell’assistenza clienti. Oppure semplicemente possono (purtroppo) permettersi di perdere qualche cliente insoddisfatto qua e là.
• Recensioni online: Cercate le recensioni online su siti come G2 e Capterra sulle diverse piattaforme. Assicuratevi di cercare recensioni affidabili di aziende consolidate. Ci sono molte giovani aziende che, purtroppo, si affidano a recensioni false per promuovere i loro prodotti. Diffidate delle nuove aziende con recensioni apparentemente perfette ma con una reputazione non sviluppata.

Alcune delle piattaforme video online più popolari sono Dacast, Kaltura, Brightcove e Livestream. Date un’occhiata al nostro confronto tra le migliori piattaforme video online per maggiori informazioni su alcune delle migliori opzioni presenti sul mercato.

Una delle ragioni principali per un’azienda o un’organizzazione professionale di utilizzare una piattaforma video online è che offre soluzioni plug-and-play per la maggior parte delle applicazioni. la maggior parte delle delle sfide che le emittenti devono affrontare.

2. Caricare il video o collegare le fonti

Una volta impostata la piattaforma video online, è tempo per caricare i contenuti video. Ogni piattaforma è unico in termini di funzionamento del processo di caricamento dei video on-demand. Su Dacast, ad esempio, è possibile caricare singoli video o caricare in blocco.

D’altra parte, se si desidera trasmettere in diretta, è necessario creare un canale live prima di poter passare al canale live. su al punto 3. Ecco come è possibile farlo usando Dacast:

1. Nel menu di sinistra, trovare e fare clic sul pulsante “Aggiungi +”.
2. Selezionare “Live Stream” dal menu.
3. Si aprirà una finestra. A questo punto, aggiungere un titolo e selezionare “Standard” come tipo di flusso.
4. Fare clic su “Crea”.

Seguite i passaggi sopra descritti per creare un canale live e ospitare con successo il vostro live stream. Ora siete pronti per la fase 3.

A questo punto, è necessario impostare le fonti. Ciò richiederà probabilmente impostazione dell’encoder e collegare le fonti attraverso di essa. Se non si dispone ancora di un encoder, si consiglia di scaricare una versione gratuita di OBS per Dacast. È facile da configurare e da avviare.

Anche in questo caso abbiamo utilizzato Dacast come esempio, ma il processo può variare. il processo può variare da piattaforma a piattaforma.

3. Scegliere un codice di incorporamento

Ora è momento di scegliere un codice di incorporamento. Esistono diversi tipi di codici embed adatti a diversi casi d’uso.

Dacast offre due opzioni di codice embed per lo streaming in diretta: JS e iframe. Entrambi lavorano per riproduzione sul vostro sito web o app su dispositivi desktop e mobili, a condizione che il file video lo supporti.

Il codice embed JS è il codice embed predefinito di Dacast e supporta la maggior parte delle funzioni. Questo include l’essere reattivi se gli elementi sono progettati in dimensioni diverse e lavorare con la funzione di restrizione del referrer.

L’iFrame è il codice embed più universalmente compatibile. L’avvertenza è che alcune caratteristiche non lavorare con esso.

Questo codice embed non è responsive, ovvero ha una dimensione fissa. A volte viene rimossa anche la funzione a schermo intero. Questo accade di solito solo se si sta utilizzando iframes all’interno di iframes.

La funzione di restrizione dei referrer basata su URL non lavorare con l’embed iframe. Per questo motivo Dacast sceglie di utilizzare il codice JS come predefinito.

4. Accesso al codice del sito web

Successivamente, dovrete individuare il punto del vostro costruttore di siti web che vi consente di accedere al codice del sito.

In generale, c’è una modalità di modifica dei blocchi che consente di trascinare e rilasciare gli elementi, e una modalità di editor di testo consente di accedere all’HTML del sito. Per questo passo, è necessario trovare l’editor HTML.

Per farvi capire quanto possa essere facile, vi guideremo attraverso questo passaggio utilizzando WordPress, uno dei più diffusi creatori di siti web.

Ecco cosa il processo di accesso al codice del vostro sito web su WordPress sarà simile:

1. Aprire la pagina o il post in cui si vuole aggiungere il video
2. Ci sarà Nell’angolo in alto a sinistra è presente un segno più; fare clic su di esso.
3. Cercare la parola “Video” nel menu degli elementi
4. Trascinare e rilasciare l’elemento video nella parte della pagina o del post in cui si desidera che il video sia presente.
5. Fate clic sui tre punti (…) in cima all’elemento video e fate clic su “Modifica come HTML”.

Se, per qualsiasi motivo, avete ancora una versione precedente di WordPress, potrebbe essere necessario passare dall'”Editor visuale” all'”Editor HTML”. Editor”. È improbabile che questo caso.

Se si utilizza una piattaforma diversa da WordPress, fare riferimento alla nostra guida dedicata all’incorporazione di un lettore video su diversi costruttori di siti web. Fornisce istruzioni specifiche su come aprire l’editor HTML su Weebly e Wix, Siti Google, Shopify, Squarespace, GoDaddy, Zyro, e Yola.

5. Inserire il codice di incorporamento

Ricordate il codice embed copiato al punto 3? Incollare il testo nell’HTML del sito web tramite l’editor di testo.

Quindi, continuando con l’esempio di WordPress che abbiamo introdotto nel passo precedente (passo 4): Dopo aver cliccato sui puntini in cima all’elemento video e aver fatto clic su “Modifica come HTML”. si avrà quindi:

1. Incollare il codice embed
2. Anteprima
3. Fare clic su “Aggiorna”.

È così semplice.

È importante sottolineare che una volta incollato lo snippet del codice embed nel codice del vostro sito, si dovrebbe anteprima per assicurarsi che appaia come che sia come lo si desidera.

Una volta soddisfatti dell’anteprima, fare clic su “Salva”.,” “Pubblica,” o “Aggiorna” per salvare le modifiche. Rivedete le modifiche sul sito live per assicurarvi che tutto sia andato come volevate. bisogno per.

Suggerimento: Assicuratevi di esaminarlo su diversi dispositivi, come cellulari, tablet e laptop. A volte può sembrare perfetto su un dispositivo e goffo su un altro.

Come incorporare più lettori video in una pagina

L’incorporazione di più lettori video in una singola pagina differisce leggermente da incorporare un solo flusso HLS.

Questo processo è relativamente facile, ma richiede un po’ di codifica. Di seguito viene riportato un esempio di codice per includere più giocatori in una singola pagina.

Per utilizzare questo codice, copiare e incollare esso nell’editor nell’editor HTML o di codice della nella pagina web a cui si desidera aggiungere il lettore video. Quindi, sostituire i segmenti di codice “XXXXX_f_XXXXX” con l’ID dei canali live.

Il codice corretto può essere trovato guardando il codice di condivisione di Facebook per i canali in questione:

<!DOCTYPE html>
 <!--
 
To change this license header, choose License Headers in Project 
Properties.
To change this template file, choose Tools | Templates and open 
the template in the editor.
 -->
 <html>
 <head>
 <title>Test Player</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
 <script src="//player.dacast.com/js/player.js"></script>
 </head>
 <body>
 <div id='test1'></div>
 <div id='test2'></div>
 <div id='test3'></div>
 <div id='test4'></div>
 <div id='test5'></div>

<script>
 var myPlayer1 = dacast('XXXXX_f_XXXXX','test1',
{player:'vjs5', width:600,height:400});
 myPlayer1.onReady(function(){
 myPlayer1.play();
 });
 var myPlayer2 = dacast('XXXXX_f_XXXXX','test2',{
player:'vjs5', width:600,height:400});
 myPlayer2.onReady(function(){
 myPlayer2.play();
 });
 var myPlayer3 = dacast('XXXXX_f_XXXXX','test3',
{player:'vjs5', width:600,height:400});
 myPlayer3.onReady(function(){
 myPlayer3.play();
 });
 var myPlayer4 = dacast('XXXXX_f_XXXXX','test4',
{player:'vjs5', width:600,height:400});
 myPlayer4.onReady(function(){
 myPlayer4.play();
 });
 var myPlayer5 = dacast('XXXXX_f_XXXXX','test5',
{player:'vjs5', width:600,height:400});
 myPlayer5.onReady(function(){
 myPlayer5.play();
 });
 </script>
 </body>
 </html>

Hosting video gratuito vs. Hosting video a pagamento

Abbiamo abbiamo discusso in dettaglio il motivo per cui dovreste incorporare un video nel vostro sito web piuttosto che utilizzare piattaforme gratuite. Ma è comunque possibile utilizzare piattaforme gratuite come Youtube per ospitare i vostri video e incorporarli sul il vostro sito web se questa è l’unica opzione possibile..

Tuttavia, ci sono degli svantaggi da considerare. Per cominciare, il marchio (come il logo di YouTube, ad esempio) rimarrà probabilmente rimarrà sui video. Inoltre, gli spettatori possono comunque cliccare sul video ed essere indirizzati fuori dal vostro sito web. Una volta che hanno cliccato sul video, siamo tornati al punto di partenza. Ora potrebbero essere su qualcosa come YouTube, dove probabilmente saranno raccomandati video di altri creatori.

Altri svantaggi includono:

• Pirateria: La pirateria video è oggi piuttosto facile sulle piattaforme gratuite. Questo avviene quando le persone rubano e distribuiscono i vostri video senza autorizzazione e senza darvi credito.
• Vantaggi SEO persi: Il tempo che gli utenti trascorrono sul vostro sito (chiamato “tempo di permanenza”) (chiamato “tempo di permanenza”) si dice che sia un fattore che contribuisce alla SEO. Ciò significa che se qualcuno fa clic sul video dal vostro sito web, lo fa per può essere portato su YouTube e ottenere i benefici SEO (non che ne abbiano bisogno!).
• Nessuna assistenza clienti: Contattare l’assistenza clienti di YouTube è quasi impossibile. Hanno soprattutto molti documenti di auto-aiuto. Quindi, se il live stream si blocca o smette di funzionare, sarete costretti a risolvere i problemi.
• Mancanza di controllo: YouTube è comunemente noto per interrompere bruscamente i video se sente la riproduzione di canzoni popolari in sottofondo. Anche se un estraneo passa in auto con una canzone popolare, il vostro live stream può essere messo in pericolo. Ci sono anche numerose storie di interi canali chiusi per motivi arbitrari.

Il collegamento tra HLS e M3U8

M3U8 è un formato di file che viene utilizzato nello streaming video. È versione Unicode del formato M3U formato di file del computer. L’estensione di questo tipo di file è “.m3u8”.

HLS si basa sul formato di file M3U8, per cui a volte lo “streaming HLS” è indicato come “streaming M3U8”.streaming M3U8.” Quindi, un lettore HLS è per definizione, un lettore HLS M3U8.

Alcune piattaforme di streaming, come Dacast, utilizzano collegamenti M3U8 per lo streaming su app per smart TV. Si tratta di un’operazione un po’ più tecnica rispetto alle impostazioni standard di molte piattaforme di streaming. Ma per i creatori di contenuti che hanno bisogno di specifiche HLS/M3U8 un po’ più precise, Dacast offre una serie di opzioni di personalizzazione.

Alternativa HLS: MPEG-DASH

MPEG-DASH (in breve DASH) è un altro modo per sfruttare lo streaming a bitrate adattivo. È possibile, in alternativa, incorporare un lettore HTML5 nel vostro sito web utilizzando DASH Adaptive Streaming invece di HLS. Tuttavia, riteniamo che HLS sia la strada da percorrere perché DASH ha un aspetto negativo importante da considerare.

Il maggiore svantaggio della DASH rispetto con HLS è la compatibilità con i dispositivi. I dispositivi Apple supportano solo HLS. In altre parole, DASH non funziona sui dispositivi Apple, come iPhone e MacBook. Considerando la popolarità dei dispositivi Apple, questa è una considerazione importante.

In passato, DASH aveva il vantaggio di offrire una qualità migliore a bitrate più bassi rispetto a HLS, ma non c’è più molto di una distinzione tra i due. Allo stesso modo, DASH in passato supportava video a risoluzione più elevata rispetto a HLS, ma dal 2017 non è più così.

Per questi motivi, l’HLS è la strada da seguire.

Conclusione

HLS è probabilmente il protocollo di streaming più innovativo nella trasmissione in diretta. Ha colmato un’esigenza importante quando Flash player è uscito di scena e HTML5 ha raggiunto la notorietà, consentendo al mondo di accedere allo streaming video su dispositivi mobili. Sarebbe difficile immaginare il mondo di oggi senza di essa!

La possibilità di incorporare uno stream HLS ovunque con pochi clic offre alle emittenti un controllo maggiore sull’esperienza dei loro spettatori come mai prima d’ora.

Dacast offre soluzioni robuste per impostare immediatamente e facilmente un lettore video o un live stream.

Registratevi per una prova gratuita di 14 giorni, senza carta di credito, e scoprite quanto è facile imparare a incorporare o creare uno stream HLS oggi stesso.

Per ulteriori informazioni sul software di streaming video HLS o sull’incorporazione di un flusso HLS, non esitate a contattare il nostro team di assistenza. Saremo lieti di saremo lieti di rispondere a tutte le vostre domande.

Iniziare gratuitamente

Per i regolari consigli per lo streaming dal vivo e offerte esclusive, potete unirvi al nostro gruppo LinkedIn.