Visit the website in English

close

Ottimizzazione dello Streaming Video HTML5

Di Tzipora Elias

20 Minuti di Lettura

banner image featured
author avatar

Tzipora Elias

Tzipora Elias is a PMP certified project and program manager at Agile SEO and an experienced writer, with 30 years of a variety of experience in the IT field.

Sommario

    Se lo streaming adattivo è un argomento nuovo per te, ti starai chiedendo: perché si parla tanto di streaming video HTML5?

    Nel complesso, lo streaming video HTML5 consente la manipolazione di contenuti multimediali utilizzando i tag HTML <audio> e <video>. Utilizzando il tag <video> crea un nativo lettore video HTML5 e permette opzioni aggiuntive per la personalizzazione e la visualizzazione di contenuti video.

    Questo può sembrare un po’ tecnico e confuso, ma fortunatamente il video in live streaming è accessibile pra più che mai per i professionisti che non sono abbastanza esperti di tecnologia.

    Con il supporto della giusta piattaforma video, le emittenti possono caricare correttamente video sicuri e fornire contenuti di alta qualità tramite JavaScript, CSS, codice semplice e una solida conoscenza del tag HTML5 <video>.

    In questo articolo, tratteremo lo streaming video HTML5 e le sue applicazioni chiave. Quindi, esamineremo brevemente i lettori video HTML5 e tratteremo tre modi per incorporare i tuoi contenuti video in un sito web. Questi metodi includono l’incorporamento diretto tramite un tag video HTML5, lo sviluppo del tuo player e l’utilizzo di un player esistente.

    Per iniziare, diamo un’occhiata ad alcuni retroscena sulle origini dello streaming video HTML5.

    Attenzione, questo post è stato aggiornato per rendere le informazioni più accurate a partire da 2021.

    Sommario

    • Che cos’è lo Streaming Video HTML5 e Come Funziona?
    • Che cos’è un Lettore Video HTML5?
    • Vantaggi dello Streaming Video HTML5
    • Protocollo HLS per Streaming Video HTML5
    • Come Incorporare un Lettore per lo Streaming HTML5
    • Come ottimizzare un flusso video HTML5
    • Tag HTML5 aggiuntivi per uno streaming migliore
    • Conclusioni

    Che cos’è lo Streaming Video HTML5 e Come Funziona?

    what is live video streaming
    Lo streaming video consente agli utenti di guardare video su Internet.

    Dagli anni ’90 è possibile accedere ai contenuti multimediali video dai nostri browser Internet.

    Come promemoria, lo streaming di un video è la riproduzione del video online. Questo processo è unico nel senso che gli spettatori possono iniziare a guardare il video prima che sia completamente scaricato e il resto del file si scarica in tempo reale.

    Questo processo offre allo spettatore un flusso costante di contenuti, senza fargli aspettare che l’intero file venga scaricato localmente prima di visualizzarlo.

    Nel corso degli anni, la tecnologia software alla base di questo processo si è evoluta per migliorare l’esperienza degli utenti. Ciò ha contribuito a migliorare la qualità del video, ridurre il buffering e migliorare la funzionalità generale del lettore video.

    Detto questo, ci sono tre metodi per lo streaming video online. Diamo un’occhiata.

    1. Utilizzo di un Formato Proprietario

    Il primo metodo per lo streaming video consiste nell’utilizzare un formato proprietario esclusivo, trasmesso in streaming da un particolare sito web.

    Questo metodo si riferisce a file come .mov, .rm o .wmv. Quando le emittenti presentavano per la prima volta i video tramite Internet, la maggior parte dei browser non disponeva di lettori video integrati. Nella maggior parte dei casi, i siti web potrebbero scegliere il formato video con cui lavorare.

    Da lì, fornirebbero solo il lettore e il video sulla pagina web stessa. Tuttavia, alcuni formati richiedevano un lettore dedicato (come Apple QuickTime per i formati .mov). Anche i video che funzionavano senza un lettore dedicato non erano facili da condividere in quei primi giorni di streaming.

    Questo metodo è piuttosto obsoleto, ma è importante menzionarlo poiché fa parte della storia dello streming live.

    2. Utilizzo di un Lettore Intermedio 

    Un altro metodo per lo streaming online è l’utilizzo di un lettore intermedio. YouTube è un esempio perfetto.

    YouTube è stato lanciato per la prima volta nel 2005 e, nel decennio successivo, l’azienda ha contribuito a rendere lo streaming video mainstream. Quindici anni dopo, YouTube è ancora abbastanza popolare.

    Quando gli utenti caricano un video su YouTube, gli spettatori accedono al contenuto tramite il player incorporato di YouTube. Allo stesso modo, gli spettatori possono condividere i contenuti video tramite un codice fornito da YouTube.

    Tuttavia, i browser moderni ora includono i propri lettori video incorporati. Ciò significa che non è sempre necessario che un sito fornisca il lettore.

    Sebbene YouTube sia gratuito, la piattaforma pone sfide significative alle emittenti e alle aziende serie. Citandone solo alcuni, questi inconvenienti includono il marchio di terze parti con il tuo video, la perdita della proprietà dei tuoi contenuti e la mancanza di funzionalità di monetizzazione.

    Queste limitazioni pongono la necessità di una soluzione alternativa per le emittenti che desiderano trasmettere in live streaming sul proprio sito.

    3. Utilizzo dello Streaming Video HTML5

    Il metodo più moderno è lo streaming video HTML5. Questo è l’approccio più innovativo e rende possibile lo streaming su qualsiasi tipo di dispositivo.

    Con lo streaming video HTML5, il sito web che ospita il contenuto utilizza l’HTTP nativo per trasmettere direttamente i media agli spettatori. 

    I tag di contenuto (ad es. tag <video>) fanno parte del codice HTML. Pertanto, l’utilizzo del tag <video> crea un lettore video HTML5 nativo all’interno del browser. Questi tag forniscono indicazioni al protocollo HTTP su cosa fare con questo contenuto. HTTP visualizza il testo e un lettore audio riproduce il contenuto audio.

    Inoltre, i tag HTML hanno vari attributi, o parametri, che forniscono ulteriori dettagli su come presentare il contenuto. Ad esempio, con il tag <img> è possibile specificare la dimensione dell’immagine.

    Più di recente, HTML5 ha ampliato le capacità multimediali dell’HTML di base. Ad esempio, i miglioramenti al tag <img> e al nuovo tag <video> offrono ai creatori di contenuti una maggiore flessibilità e facilità nella presentazione dei contenuti multimediali.

    Questa flessibilità consente alle emittenti di fornire contenuti multimediali senza preoccuparsi del browser utilizzato da un determinato visitatore.

    Che cos’è un Lettore Video HTML5?

    HTML5 Video Player
    I lettori video HTML5 hanno rivoluzionato il modo in cui trasmettiamo i video.

    Fino a tempi relativamente recenti, il metodo principale per distribuire video tramite Internet era la tecnologia video Flash di Adobe. Tuttavia, negli ultimi anni, questo protocollo è stato ampiamente sostituito da protocolli di distribuzione video come lo streaming HLS e la riproduzione in lettori video HTML5 .

    Oggi, Flash è considerato un protocollo di streaming obsoleto. In effetti, Chrome ha completamente eliminato il supporto per Flash alla fine del 2020 e altri principali browser stanno seguendo l’esempio.

    Come descritto sopra, lo streaming video HTML5 offre soluzioni di streaming più moderne per lo streaming di video direttamente da un sito web. Prima di HTML5, i siti si affidavano a lettori flash incorporati per mostrare i video agli utenti.

    Con l’elemento video HTML5, il processo di streaming è stato semplificato e migliorato sia per gli spettatori che per le emittenti. Inoltre, i video HTML5 possono essere trasmessi in streaming su tutti i tipi di dispositivi. Molti dispositivi di streaming mobile, d’altra parte, non possono gestire i video in flash.

    Nel complesso, lo streaming video HTML5 offre un modo più semplice per utilizzare i video sulle pagine web. Prima della sua pubblicazione come linguaggio di markup nel 2014, i video potevano essere riprodotti solo in un browser con plug-in come Flash. Utilizzando HTML5, gli sviluppatori non si preoccupano più del browser o dell’estensione utilizzata dai visitatori.

    Inoltre, HTML5 semplifica la consegna dei video fornendo supporto per vari attributi, elementi e tag per aiutare con la struttura della tua pagina web. Queste funzionalità di supporto includono articoli, sezioni e tag multimediali che supportano l’aggiunta di formati video e audio ai tuoi contenuti.

    Vantaggi dello Streaming Video HTML5

    Lo streaming tramite un lettore video HTML5 è l’opzione preferita per molte ragioni e presenta numerosi vantaggi di trasmissione. Per cominciare, è altamente accessibile. La maggior parte delle piattaforme video online moderne è dotata di lettori video HTML5. È così comune che è praticamente l’opzione predefinita.

    Il motivo per cui HTML5 è così diffuso è che è altamente compatibile. Già questo è un vantaggio importante. I metodi di streaming precedenti erano incompatibili con lo streaming su un dispositivo mobile. Poiché l’uso di smartphone e tablet è diventato molto diffuso, la compatibilità con tutti i dispositivi è un must.

    Un altro vantaggio dello streaming video HTML5 è che è altamente personalizzabile. Ciò offre alle emittenti un maggiore controllo sul risultato finale.

    Protocollo HLS per Streaming Video HTML5

    Negli ultimi anni, HLS è diventato un protocollo comune per lo streaming di video su lettori HTML5.

    Questi progressi tecnologici sono stati vantaggiosi sia per le emittenti che per gli spettatori. In particolare, le emittenti possono modificare sia HTML5 che HLS secondo le loro specifiche. Inoltre, questi protocolli sono più sicuri, affidabili e veloci rispetto alle tecnologie precedenti.

    Se non conosci il termine, “HLS” è l’acronimo di “HTTP Live Streaming“. HLS è un protocollo di streaming multimediale utilizzato per fornire contenuti multimediali visivi e audio agli spettatori online.

    Lanciato per la prima volta da Apple nel 2009, lo streaming HLS è ora spesso preferito dalle emittenti per il suo ampio supporto su più browser e dispositivi.

    Altri protocolli più datati includono: RTMP, HDS, MSS e MPEG-Dash. Puoi leggere di più a riguardo dell’HLS in generale e dello streaming HLS con un lettore video HTML5, nel nostro post sui protocolli di streaming HLS.

    Come Incorporare un Lettore per lo Streaming HTML5

    Ora che hai compreso la storia e lo scopo dei lettori video HTML5, esamineremo alcuni approcci allo streaming HTML5.

    Per iniziare, discutiamo dei tre modi principali per incorporare video sul tuo sito web:

    • Usa il tag HTML5 <video> direttamente nel tuo browser
    • Crea il tuo lettore
    • Scegli un lettore HTML5 già pronto

    1. Incorpora un Video con HTML5

    embed video html5 tag
    Puoi utilizzare il tag video HTML5 per personalizzare diversi aspetti del tuo streaming video.

    Quando imposti lo streaming video HTML5 sul tuo sito web, devi dichiarare quanto segue:

    • Un tag <video>
    • L’URL del video
    • Eventuali requisiti stilistici che potresti voler personalizzare (per un lettore video più accattivante rispetto al lettore standard)

    *Attenzione: è importante notare che il tag <video> è un semplice pezzo di codice che puoi aggiungere alle tue pagine web.

    Il tag <video> standard fornisce le seguenti funzionalità:

    • Specificare la larghezza e l’altezza del lettore
    • Visualizza o nascondi i controlli video, inclusi riproduzione/pausa, volume, attivazione/disattivazione a schermo intero e cursore di ricerca
    • Imposta un’immagine poster da visualizzare durante il download o la mancata riproduzione del video
    • Fornisci una serie di video in diversi formati, in modo che ogni browser possa riprodurre un formato che supporta
    • Includi sottotitoli o didascalie in più lingue
    • Indica al browser se avviare il download del video al caricamento della pagina o solo quando l’utente preme “Play”
    • Controlla le impostazioni di riproduzione automatica
    • Decidi se riprodurre i contenuti una volta o in sequenza
    • Indica se desideri riprodurre il video senza audio (disattivato). Ad esempio, i video automatizzati su Facebook mostrano l’opzione muto sovrapposta al video

    Nota: vorremmo sottolineare che sebbene il tag HTML5 <video> sia considerato l’elemento del lettore video più ampiamente supportato, non tutte le versioni di tutti i browser lo supportano.

    Se gli utenti visitano il tuo sito utilizzando versioni precedenti ai seguenti browser, non potranno guardare alcun video visualizzato utilizzando HTML5:

    html5 browser support

    • Chrome: versione 4.0
    • Microsoft Explorer (predecessore di Edge): versione 9.0
    • Mozilla Firefox: versione 3.5
    • Safari: versione 4.0
    • Opera: versione 10.5

    È anche importante notare che lo streaming video HTML5 richiede conoscenze tecniche e risorse dedicate. Pertanto, è meglio optare per un lettore HTML5 esistente se non hai le conoscenze per manipolare il codice HTML5, ma discuteremo ulteriormente di questa opzione in questo post.

    2. Sviluppa il Tuo Lettore HTML5

    html5 video player
    Con la formazione e la squadra giuste, puoi sviluppare il tuo lettore HTML5.

    Un’altra opzione per incorporare contenuti video sul tuo sito web è tramite il tuo lettore video HTML5. La creazione di un lettore video HTML5 personalizzato richiede una combinazione di codifica HTML e CSS. Richiede inoltre la conoscenza dell’API HTML5 Media.

    Senza specificare alcun codice che stilizzi il lettore video HTML5, l’aspetto del lettore è piuttosto semplice. Dipende anche dal browser da cui viene riprodotto il video.

    Fornire un’interfaccia coerente per lo streaming video HTML5 sul tuo sito è utile anche per scopi di branding e presentazione visiva.

    Ancora una volta, è importante notare che lo streaming video HTML5 è un’opzione abbastanza tecnica adatta a persone con conoscenze di programmazione richieste. Altrimenti, un lettore HTML5 esistente creato da un team dedicato tramite un’API di live streaming, ad esempio, è un’opzione migliore se ti manca il know-how tecnico.

    3. Usa un Lettore HTML5 Esistente

    html5 streaming video
    Il lettore video di Dacast con funzionalità white label fornisce una piattaforma pronta all’uso per lo streaming video HTML5 e la personalizzazione dell’esperienza utente.

    Se non sei pratico nel trasmettere, ti consigliamo vivamente di utilizzare un lettore HTML5 già esistente.

    Come accennato in precedenza, esistono già molti player HTML5 e possono essere facilmente personalizzati dalle emittenti per rappresentare al meglio il proprio brand. Ciò consente agli utenti che non hanno le conoscenze tecniche per lo streaming video HTML5 di trasmettere comunque il video scelto.

    Ecco alcuni lettori video validi disponibili oggi:

    • VideoJS è un lettore HTML5 open source gratuito che utilizza Javascript e CSS. Più di 400.000 siti web in tutto la rete utilizzano questo particolare lettore.
    • Alcuni lettori HTML5 utilizzano VideoJS come base e aggiungono più funzionalità al lettore standard. Un esempio è il lettore video per tutti i dispositivi Dacast, che offre funzionalità per lo streaming di video in diretta e una skin del lettore personalizzabile.
    • JW Player è un lettore video HTML5 a pagamento che supporta video 4K e streaming con bitrate adattivo .
    • Altre soluzioni includono Flow Player, jPlayer e Mediaelement.js.

    Il video HTML5 nativo non supporta lo streaming di app RTMP né i protocolli HDS. Tuttavia, JW supporta questi due protocolli. Quindi, come accennato in precedenza, se prevedi di utilizzare un lettore video esclusivamente HTML5, HLS è probabilmente il protocollo migliore per te.

    Vorremmo anche sottolineare che alcuni lettori video HTML5 esistenti, incluso quello di Dacast, sono progettati per lo streaming a bassa latenza. Qualsiasi video in streaming con un lettore video Dacast utilizza automaticamente lo streaming a bassa latenza.

    Come Ottimizzare un HTML5 Video Stream Tag

    Ci sono alcuni modi per ottenere il massimo dal tag HTML5 <video>.

    La prima cosa a cui prestare attenzione è il formato. L’utilizzo di formati standard consente agli utenti di riprodurre facilmente i video. MP4 (MPEG-4) è il formato più utilizzato. Tuttavia, i formati Ogg e WebM stanno diventando sempre più conosciuti.

    WebM è ora supportato dalle versioni recenti di Chrome, Firefox, Opera, Safari su OS/X e Microsoft Internet Explorer 9 e versioni successive (richiede componenti WebM MF). Con questo sviluppo, più formati significano una visualizzazione più semplice.

    Un importante trucco per l’ottimizzazione nella distribuzione dei video consiste nell’abbassare il tempo di ritardo o la latenza. Oggi, il video è la forma più popolare di consumo di contenuti. Gli utenti trascorrono pochi secondi in attesa che i video inizino a essere riprodotti.

    Le emittenti vorranno anche ottimizzare le impostazioni di controllo. Ecco una rapida ripartizione di alcune impostazioni comuni a cui prestare attenzione:

    • Dimensione fisica: imposta la dimensione fisica massima per fornire il controllo sui caricamenti e ridurre il tempo di ritardo. Usare una dimensione del fotogramma di 1280×720, ad esempio, solitamente è sufficiente per la maggior parte dei video.
    • Lunghezza: Ritaglia i video per catturare i fotogrammi più avvincenti.
    • Qualità e bitrate: regola queste impostazioni per ridurre le dimensioni del file senza un impatto significativo sulla qualità video percepita.
    • Video-Codec: generalmente, puoi utilizzare le impostazioni predefinite per normalizzare e ottimizzare il video per il web. Tuttavia, in alcuni casi, si desidera impostare manualmente il codec per ridurre ulteriormente le dimensioni del file.
    • Compressione: comprimi sempre i file video prima di utilizzarli sul tuo sito.

    Tag HTML5 Aggiuntivi per uno Streaming Migliore

    Il tag <video> non è l’unico strumento nella tua cassetta degli strumenti HTML5 per l’ottimizzazione dei videoAd esempio, elencare i tag <source> insieme ai tag <type> corrispondenti in un ordine ottimizzato può migliorare le prestazioni del tuo video.

    Ciò è dimostrato in questo codice HTML5 di esempio per lo streaming video in diretta:

    <video width=”480” controls>

        <source scr=”https://myweb.org/webm/video1.webm” type=”video/webm”>

        <source scr=”https://myweb.org/mp4/video1.mg4” type=”video/mp4”>

        <source scr=”https://myweb.org/ogg/video1.ogv” type=”video/ogv”>

        <track kind=”captions” src=”sampleCaption_he.vtt” scrlang=”he”>

    </video>

    Tieni presente che un browser riprodurrà il primo tipo di formato supportato. In altre parole, la prima voce nell’elenco è l’impostazione predefinita. Chrome e Firefox riprodurranno il video WebM, mentre i predecessori di Microsoft Edge salteranno al video MP4.

    Si consiglia di elencare prima il video più supportato e quello più piccolo per assicurarsi che il file venga riprodotto come impostazione predefinita.

    L’utilizzo di alcuni tag aggiuntivi ti aiuterà a personalizzare il tuo lettore video. Ecco alcune opzioni:

    • Il tag <width> controlla la larghezza del video riprodotto.
    • Il tag <controls> è un attributo Booleano che consente agli utenti di accedere ai controlli di riproduzione.
    • Il tag <track> crea una trascrizione per aumentare l’accessibilità dei contenuti.
    • Il tag <embed> crea un contenitore per i media esterni.

    Infine, se vuoi che il video si avvii automaticamente, usa l’elemento video <autoplay> .

    Conclusioni

    HTML5 video stream
    Il tag script Video HTML5 viene utilizzato per incorporare uno script lato client in JS (JavaScript).

    Per ricapitolare, lo streaming video HTML5 migliora le pagine web e coinvolge i visitatori meglio del solo testo. Per intrattenere gli spettatori, le emittenti devono ottimizzare lo streaming live HTTP con lo scopo di garantire una distribuzione video rapida, fluida e compatibile per gli spettatori. L’utilizzo corretto dei tag multimediali HTML5 garantisce che i tuoi contenuti siano accessibili e invoglino i visitatori a tornare.

    In questo articolo abbiamo definito lo streaming video HTML5 e i lettori video. Abbiamo anche discusso di diversi modi per trasmettere video in diretta sul tuo sito web tramite incorporamento. Inoltre, abbiamo evidenziato alcuni pro e contro comuni di ciascun metodo.

    Non fai ancora streaming con Dacast e sei pronto a provare la nostra piattaforma di live streaming? Offriamo una gamma di funzionalità nuove e avanzate, tra cui hosting di video in Cina e opzioni di monetizzazione, a prezzi convenienti.

    Iscriviti alla nostra prova gratuita di 30 giorni per iniziare lo streaming oggi. Ti aiuteremo ad avviare lo streaming in pochi minuti. Nessuna carta di credito verrà richiesta.

    INIZIA GRATIS

    Dopo aver letto, qual è la tua opinione sull’incorporamento di video utilizzando HTML5? Hai ancora domande a cui vorresti rispondessimo, qui o in articoli futuri? Faccelo sapere tramite la sezione chat!

    Per offerte esclusive e suggerimenti regolari sul live streaming, puoi anche unirti al nostro gruppo LinkedIn.

    author avatar

    Tzipora Elias

    Tzipora Elias is a PMP certified project and program manager at Agile SEO and an experienced writer, with 30 years of a variety of experience in the IT field.

    Iscriviti per una prova di 14 Giorni.