The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Video

Gli utenti amano i video; possono essere divertenti e informativi. Sui dispositivi mobili, i video possono essere un modo più immediato per acquisire informazioni. Tuttavia, i video consumano larghezza di banda e non funzionano allo stesso modo su tutte le piattaforme. Agli utenti non piace attendere troppo il caricamento dei video o premere Riproduci senza che nulla accada. Scopri di più sul modo più semplice per aggiungere video al tuo sito ed assicurare la migliore esperienza agli utenti su qualsiasi dispositivo.

Aggiungere un video

TL;DR

  • Utilizza elementi video per caricare, decodificare e riprodurre i video del tuo sito.
  • Crea video in diversi formati per una vasta gamma di piattaforme mobili.
  • Dimensiona i video al meglio evitando l'overflow dei relativi contenitori.
  • L'accessibilità è importante: aggiungi elementi track figli dell'elemento video.

Aggiunta di elementi video

Aggiungi l'elemento video per caricare, decodificare e riprodurre i video sul tuo sito.

<video src="chrome.webm" type="video/webm">
    <p>Il browser in uso non supporta l'elemento video.</p>
</video>

Specifica di diversi formati di file

Non tutti i browser supportano gli stessi formati video. L'elemento <source> consente di specificare diversi formati sostitutivi nel caso in cui il browser dell'utente non ne supporti qualcuno.

Ad esempio:

{% includecode 
content_path="web/fundamentals/media/_code/video-main.html" 
region_tag="sourcetypes" adjust_indentation="auto" %}

Prova

Quando il browser analizza i tag <source> utilizza l'attributo opzionale type per decidere quale file scaricare e riprodurre. Se il browser supporta WebM, riprodurrà chrome.webm. In alternativa, verifica la possibilità di riprodurre video MPEG-4.

Consulta Una guida ai video digitali per Geek per ulteriori informazioni sulle modalità di funzionamento di audio e video sul Web.

Questo approccio offre diversi vantaggi rispetto all'utilizzo dell'HTML differente o dello scripting lato server, in particolare per i dispositivi mobili:

  • Consente agli sviluppatori di elencare i formati in ordine di preferenza.
  • La selezione nativa lato client riduce la latenza; una sola richiesta per il recupero del contenuto.
  • Lasciare al browser la scelta del formato è più semplice, veloce e potenzialmente più affidabile rispetto all'utilizzo di un database di supporto dal lato server con rilevamento dell'user-agent.
  • Indicando ciascun tipo di file di origine migliora il rendimento di rete; il browser più selezionare una sorgente video senza dover scaricare parte dello video per lo sniffing del formato.
  • È possibile ottimizzare il rendimento di rete indicando ciascun tipo di origine del file: il browser individua l'origine del video senza scaricare parte dello video per lo "sniff" del formato.

Tutte queste considerazioni sono importanti nel contesto mobile, dove larghezza di banda e latenza sono un bene premium mentre la pazienza degli utenti è limitata. Il mancato inserimento di un attributo di tipo riduce il rendimento in presenza di origini multiple con tipi non supportati.

Usando gli strumenti di sviluppo del browser del dispositivo mobile, confronta l'attività di rete con gli attributi di tipo e senza attributi di tipo. Controlla anche le intestazioni della risposta usando gli strumenti di sviluppo del tuo browser per verificare che il server restituisca il corretto tipo MIME. In caso contrario, i controlli del tipo dell'origine video non funzioneranno.

Specifica tempi di inizio e fine

Risparmia larghezza di banda ed ottimizza la reattività del sito usando API Media Fragments aggiungendo i tempi di inizio e fine all'elemento video.

Per aggiungere un 'media fragment', è sufficiente inserire #t=[start_time][,end_time] all'URL del contenuto multimediale. Ad esempio, per riprodurre un video dal secondo 5 fino al 10 specificare:

<source src="video/chrome.webm#t=5,10" type="video/webm">

Inoltre, è possibile utilizzare API Media Fragments per creare diverse visualizzazioni dello stesso video–come i cue point di un DVD–senza codificare e distribuire diversi file.

Usando gli strumenti di sviluppo del tuo browser, controlla la presenza di Accept-Ranges: bytes nelle intestazioni della risposta:

Schermata degli strumenti di sviluppo di Chrome: Accept-Ranges:
bytes

Inserimento di un'immagine poster

Aggiungi un attributo poster all'elemento video così i tuoi utenti avreanno un'indicazione dei contenuti non appena si caricherà l'elemento, senza scaricare il video o avviarne la riproduzione.

<video poster="poster.jpg" ...>
  ...
</video>

Un poster può essere un sostituto nel caso in cui il video src sia danneggiato oppure nessuno dei formati video forniti via supportato. L'unico svantaggio legato all'utilizzo delle immagini poster è che si tratta di un'ulteriore richiesta di file, che consuma larghezza di banda e richiede un rendering. Per ulteriori informazioni consulta Ottimizzazione delle immagini.

Segue un confronto fianco a fianco dei video con e senza immagine poster–abbiamo realizzato l'immagine poster in bianco e nero per dimostrare che non si tratta del video:

Schermata di Chrome per Android, verticale: senza poster
Schermata Android Chrome, verticale: senza poster
Schermata di Chrome per Android, verticale: con poster
Schermata Android Chrome, verticale: con poster

Fornire alternative per piattaforme legacy

Non tutti i formati video sono supportati su tutte le piattaforme. Verifica quali formati sono supportati dalle principali piattaforme ed assicurati che il tuo video funzioni su ciascuna di esse.

Verifica i formati supportati

Utilizza canPlayType() per trovare quali formati video sono supportati. Il metodo accetta un argomento stringa mime-type e un codec facoltativo e restituisce uno dei seguenti valori:

Valore restituito e Descrizione
(stringa vuota) Contenitore e/o codec non supportato.
maybe Contenitore e codec potrebbero essere supportati, ma il browser richiede una verifica tramite il download di alcuni video.
probably Il formato sembra essere supportato.

Di seguito sono riportati alcuni esempi di canPlayType() con i relativi argomenti e valori restituiti tramite l'utilizzo di Chrome:

Tipo e Risposta
video/xyz (stringa vuota)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (stringa vuota)
video/xyz; codecs="nonsense, noise" (stringa vuota)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

Crea video in più formati

Esistono diversi strumenti che consentono di salvare lo stesso video in formati diversi:

Verifica il formato utilizzato

Desideri conoscere il formato video attualmente selezionato dal browser?

In JavaScript, utilizza la proprietà currentSrc del video che ritorna la sorgente utilizzata.

Per un esempio pratico, dai un'occhiata alla demo: per Chrome e Firefox scegli chrome.webm (è infatti la prima nell'elenco delle fonti potenziali supportate da questi browser), per Safari invece scegli chrome.mp4.

Dimensionamento corretto dei video

Per ottenere un prodotto che piaccia agli utenti, le dimensioni del file sono importanti.

TL;DR

  • Non servire video con una dimensione maggiore del frame o di una qualità superiore rispetto gestibile dalla piattaforma.
  • Non realizzare video più lunghi di quanto non sia necessario.
  • I video lunghi causano download e seeking a singhiozzo; Alcuni browser potrebbero dover attendere il download del video prima di iniziare la riproduzione.

Verifica le dimensioni del video

Le dimensioni effettive del video codificato potrebbero non corrispondere alle dimensioni dell'elemento video (come nel caso di un'immagine che non può essere visualizzata utilizzando le sue dimensioni reali).

Per verificare le dimensioni di un video codificato, utilizza le proprietà dell'elemento video: videoWidth e videoHeight. Le proprietà width e height restituiscono le dimensioni dell'elemento video, che potrebbero essere state dimensionate utilizzando CSS o gli attributi larghezza e altezza inline.

Assicurati che i video non siano più grandi dei contenitori

Quando gli elementi video sono troppo grandi per il viewport, possono eccedere dai rispettivi contenitori, impedendo la visualizzazione oppure l'utilizzo dei controlli da parte degli utenti.

Screenshot verticale di Android Chrome: l'elemento video 
    senza stile supera il viewport
Screenshot verticale di Android Chrome: l'elemento video senza stile supera il viewport
Screenshot orizzontale di Android Chrome: l'elemento video 
    senza stile supera il viewport
Screenshot orizzontale di Android Chrome: l'elemento video senza stile supera il viewport

Puoi controllare le dimensioni del video con JavaScript o CSS. Le librerie ed i plugin di JavaScript, come FitVids, consentono di rispettare le dimensioni e le proporzioni corrette, anche nel caso dei video Flash di YouTube e di altre fonti.

Utilizza CSS media queries per specificare la dimensione degli elementi in base alle dimensioni del viewport; max-width: 100% è ideale.

Per contenuti multimediali in iframes (come i video di YouTube), opta per un approccio responsive (come quello proposto da John Surdakowski).

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="video-container">
  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
          frameborder="0" width="560" height="315">
  </iframe>
</div>

Confronta l'esempio reattivo con con la versione non reattiva.

Personalizzazione del riproduttore multimediale

Contronta esempio responsive con l'esempio non responsive.

Personalizzazione del riproduttore multimediale

Ciascuna piattaforma visualizza i video in modo diverso. Le soluzioni per dispositivi mobili devono valutare anche l'orientamento del dispositivo. Utilizza l'API Fullscreen per il controllo della visualizzazione a schermo intero dei contenuti video.

Modalità di funzionamento dell'orientamento su diversi dispositivi

L'orientamento del dispositivo non è un problema per i PC desktop o portatili, ma è importante per la progettazione delle pagine web per dispositivi mobili e tablet.

Safari per iPhone commuta in maniera eccellente l'orientamento verticale e orizzontale:

Schermata di un video riprodotto da Safari per iPhone, in
    verticale
Schermata di un video riprodotto da Safari per iPhone, in verticale
Schermata di un video riprodotto da Safari per iPhone, in
    orizzontale
Schermata di un video riprodotto da Safari per iPhone, in orizzontale

L'orientamento del dispositivo su iPad e Chrome per Android può diventare un problema. Ad esempio, senza alcuna personalizzazione la riproduzione di un video su un iPad con orientamento orizzontale produce quanto segue:

Schermata di un video riprodotto con Safari per iPad Retina, in
orizzontale

Impostando width: 100% o max-witdh: 100% sul video usando i CSS è possibile risolvere diversi problemi della disposizione dell'orientamento del dispositivo. È possibile anche prendere in considerazione alternative a schermo intero.

Visualizzazione inline o a schermo intero

Schermata di un elemento video su iPhone, in
verticale

Le diverse piattaforme visualizzano i video in modo diverso. Safari per iPhone visualizza un elemento video inline in una pagina web, ma il video viene riprodotto in modalità a schermo intero:

Schermata di un video riprodotto in Chrome su
Android, in verticale

Su Android, è possibile attivare la modalità a schermo intero facendo clic sulla relativa icona. Tuttavia, l'impostazione predefinita prevede la riproduzione inline del video:

Schermata di un video riprodotto in Safari su
iPad Retina, in verticale

Safari per iPad prevede la riproduzione inline del video:

Controllo della visualizzazione a schermo intero dei contenuti

Per le piattaforme che non forzano la riproduzione video a schermo intero l'API Fullscreen è ampiamente supportata. Utilizza l'API per il controllo della visualizzazione a schermo intero dei contenuti o della pagina.

Per visualizzare un elemento a schermo intero come un video:

elem.requestFullScreen();

Per visualizzare a schermo intero un documento intero:

document.body.requestFullScreen();

Inoltre, puoi metterti in ascolto dei cambiamenti di stato della visualizzazione a schermo intero:

video.addEventListener("fullscreenchange", handler);

In alternativa, verifica che l'elemento sia in modalità a schermo intero:

console.log("In full screen mode: ", video.displayingFullscreen);

Inoltre, è possibile utilizzare la pseudo classe :fullscreen CSS per modificare la modalità di visualizzazione a schermo intero degli elementi.

Per visionare l'esecuzione dell'operazione, consulta demo.

Per visionarlo in azione, consulta la demo.

L'importanza dell'accessibilità

L'accessibilità non è una funzionalità. Gli utenti audiolesi o ipovedenti non possono guardare un video senza didascalie o descrizioni. Il tempo necessario per aggiungere queste caratteristiche ai tuoi video è molto inferiore della scarsa esperienza utente che fornirai. Consenti almeno l'esperienza base a tutti gli utenti.

Inserimento delle didascalie per una maggiore accessibilità

Schermata con didascalie visualizzate 
con l'elemento track in Chrome per Android

Per aumentare l'accessibilità degli elementi multimediali sui dispositivi mobili, inserisci didascalie o descrizioni mediante l'elemento track.

Aggiungere un elemento track

È molto semplice aggiungere didascalie ai tuoi video–semplicemente aggiungi un elemento track come figlio dell'elemento video.

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

Prova

L'attributo track dell'elemento src indica la posizione del file track.

Inserire didascalie nel file track

Un file track è costituito da indicatori "cue" temporizzati in formato WebVTT:

WEBVTT

00:00.000 --> 00:04.000
Uomo seduto sul ramo di un albero che utilizza un portatile.

00:05.000 --> 00:08.000
Ramo che si spezza facendo cadere l'uomo.

...

Consultazione rapida

Attributi dell'elemento video

Per l'elenco completo degli attributi dell'elemento video e delle relative definizioni, si veda le specifiche dell'elemento video.

Attributo Disponibilità Descrizione
src Tutti i browser Indirizzo (URL) del video.
poster Tutti i browser Indirizzo (URL) di un file di immagine mostrato dal browser quando l'elemento video viene visualizzato senza che il relativo contenuto venga scaricato.
preload Tutti i browser per dispositivi mobili ignorano il precaricamento. Indica al browser l'utilità di precaricare i metadati (o i video) prima dell'effettiva riproduzione. Le opzioni sono: nessuno, metadati o auto (vedi la sezione relativa al Precaricamento per ulteriori dettagli).
autoplay Non supportato da iPhone o Android; supportato da tutti i browser desktop, iPad, Firefox e Opera per Android. Avvia il download e la riproduzione il prima possibile (vedi la sezione relativa all'Autoplay).
loop Tutti i browser Esegui il loop del video.
controls Tutti i browser Mostra i controlli video predefiniti (riproduci, pausa, ecc.)

Autoplay

Sul desktop, autoplay indica al browser di iniziare immediatamente, appena possibile, il download e la riproduzione del video. autoplay non funziona su iOS e Chrome per Android; gli utenti devono toccare lo schermo per riprodurre il video.

Anche su piattaforme dove l'opzione autoplay è possibile, devi valutare attentamente se attivarla:

  • L'utilizzo dei dati può essere costoso.
  • A causa del download di contenuti multimediali senza richiesta, la larghezza di banda viene ridotta inaspettatamente, la CPU viene occupata e viene quindi ritardato il rendering della pagina.
  • Gli utenti possono trovarsi in un contesto in cui la riproduzione di video o audio è inopportuna.

Il funzionamento dell'opzione autoplay può essere configurato in Android WebView attraverso WebSettings API. L'impostazione predefinita è true, ma una app WebView hai la possibilità di disabilitarla.

Precaricamento

L'attributo preload suggerisce al browser il quantitativo di informazioni o contenuti da precaricare.

Valore e Descrizione
none L'utente può anche decidere di non vedere il video e di non precaricare nulla
metadata I metadati (durata, dimensioni, tracce di testo) dovrebbero essere precaricati, ma con video di dimensioni ridotte.
auto È opportuno eseguire direttamente il download dell'intero video.

L'attributo preload ha effetti diversi sulle varie piattaforme. Ad esempio, mentre sui computer desktop Chrome esegue il buffering di 25 secondi di video, ciò non avviene in iOS o Android. Ciò significa che, a differenza dei computer desktop, sui dispositivi mobili potrebbero esserci ritardi nell'avvio della riproduzione. Per tutti i dettagli, si veda la pagina di prova di Steve Souders.

JavaScript

L'articolo su HTML5 Rocks Video è un ottimo riepilogo sulle proprietà, sui metodi e sugli eventi di JavaScript che è possibile utilizzare per controllare la riproduzione di video. Gli stessi contenuti sono riportati di seguito e aggiornati nei casi in cui si riferiscano ai dispositivi mobili.

Proprietà

Property & Description
currentTime Accedi o imposta la posizione di riproduzione in secondi.
volume Accedi o imposta il volume attuale per il video.
muted Accedi o imposta l'audio muto.
playbackRate Accedi o imposta la velocità di riproduzione; 1 è la velocità di riproduzione normale.
buffered Informazioni su quanto contenuto del video è stato sottoposto a buffering e può essere riprodotto.
currentSrc L'indirizzo del video in riproduzione.
videoWidth Larghezza del video in pixel (potrebbe essere diversa da quella dell'elemento video).
videoHeight Altezza del video in pixel (potrebbe essere diversa da quella dell'elemento video).

I dispositivi mobili non supportano playbackRatevolume (vedi demo).

Metodi

Metodo e Descrizione
load() Carica o ricarica una fonte video senza avviare la riproduzione: ad esempio, quando il video src viene modificato utilizzando JavaScript.
play() Riproduzione del video dalla posizione attuale.
pause() Pausa del video nella posizione attuale.
canPlayType('format') Trova i formati riproducibili (vedi Verifica i formati supportati).

Sui dispositivi mobili (eccetto Opera su Android), i metodi play() e pause() non funzionano a meno che non siano attivati dall'utente, ad esempio facendo clic su un pulsante; si vde la demo. (Allo stesso modo, non è possibile avviare la riproduzione di contenuti come i video incorporati di YouTube).

Eventi

Esiste un unico sottoinsieme di eventi multimediali che può essere attivato. Per un elenco completo, fai riferimento alla pagina Media events di Mozilla Developer Network.

Evento e Descrizione
canplaythrough Attivato non appena ci sono sufficienti dati disponibili, necessari al browser per riprodurre l'intero video senza interruzioni.
ended Attivato quando termina la riproduzione del video.
error Attivato quando si verifica un errore.
playing Attivato durante la prima riproduzione del video, dopo una pausa o al riavvio.
progress Attivato periodicamente per indicare lo stato del download.
waiting Attivato quando un'azione viene ritardata in attesa del completamento di un'altra azione.
loadedmetadata Attivato quando il browser completa il caricamento dei metadati per il video: durata, dimensioni e track di testo.