Wikipedia

HTML5 video

elemento HTML5

HTML5 video è un elemento introdotto nelle specifiche dell'HTML5 con lo scopo di aprire nuovi standard sulla riproduzione di filmati e video, tutto ciò in sostituzione all'elemento <object>.

Ciò comporta che i browser rispettanti l'HTML5 non necessitano di player proprietari (come Adobe Flash Player) per riprodurre video incorporati tramite il tag <video>.

Questo standard è ostacolato dalla mancanza di un accordo su quali formati video debbano essere ufficialmente supportati.

Specifiche modifica

L'HTML5 prevede una serie di attributi da aggiungere al tag di apertura <video> per indicare al browser se e come usare determinate caratteristiche:

  • src - indica la posizione del file video;
  • width - imposta la larghezza del video in pixel;
  • height - imposta l'altezza del video in pixel;
  • poster - consente di specificare un'immagine che sia visualizzata all'interno dell'area di riproduzione prima che il video venga eseguito;
  • controls - la sua presenza indica al browser di visualizzare i classici controlli play, pausa, volume, barra di avanzamento ecc.;
  • autoplay - quando è presente indica al browser di avviare la riproduzione del video appena si raggiungono le condizioni minime di buffer necessarie;
  • loop - se è presente questa stringa, il browser ricomincerà nuovamente la riproduzione del video non appena questo sarà giunto alla fine;
  • preload - questo attributo riguarda il caricamento del video e dispone di tre opzioni: none, metadata e auto: la prima indica al browser di non effettuare nessun caricamento del video finché non venga premuto il tasto play, la seconda indica di caricare soltanto i metadati, cioè informazioni di base come la durata, le dimensioni e i codec del video, mentre la terza indica al browser di cominciare immediatamente il caricamento del video;
  • muted - la presenza di questo attributo fa sì che il browser non riproduca nessun suono durante la riproduzione del video;
  • audio - questo attributo, impostato a muted, è stato sostituito dal precedente in seguito ad una revisione delle specifiche e non è più utilizzato.

Tra i tag di apertura (<video>) e chiusura (</video>) può essere inserito un testo che i browser che non supportano l'HTML5 mostreranno al posto del video.

Il seguente frammento di codice HTML5 inserisce un video in formato WebM nella pagina e mostra l'uso degli attributi visti precedentemente (nell'esempio sono mostrati tutti, nella realtà si inseriscono solo quelli desiderati). 

<video src="esempio.webm" width="720" height="576" poster="immagine.jpg" controls autoplay loop preload="auto" muted>
  Questo testo viene visualizzato se il browser non supporta l'HTML5.
</video>

Formati video supportati modifica

Le correnti norme dell'HTML5 non specificano quali formati video i browser debbano supportare nel tag video. Pertanto ad oggi essi possono supportare qualunque formato che i loro sviluppatori ritengano appropriato.

Dibattito sul formato unico modifica

l'HTML5 Working Group ritiene che sia preferibile che ci sia un formato video unico che sia supportato da tutti i browser. Il formato ideale dovrebbe:

  • avere una buona compressione, una buona qualità dell'immagine e non gravare troppo sul processore;
  • essere libero dalla necessità di pagare delle licenze per il suo utilizzo;
  • avere, oltre ai decoder software, anche un decoder hardware, dato che molti processori integrati non sono abbastanza potenti da decodificare i video.

Inizialmente Theora era lo standard video raccomandato per l'HTML5, dal momento che non è vincolato da nessun brevetto conosciuto. Tuttavia il 10 dicembre 2007, la bozza dell'HTML5 è stata modificata, sostituendo il riferimento a Theora:

«I programmi dovrebbero supportare il video Theora e l'audio Vorbis, così come il formato contenitore Ogg.»

con:

«È utile per l'interoperabilità se tutti i browser supportano gli stessi codec. Tuttavia non c'è codec noto che funzioni con tutti i lettori attualmente esistenti: c'è bisogno di un codec che non richieda pagamento di licenze, che sia compatibile con il modello di sviluppo open source, che abbia sufficiente qualità per poter essere usato e che non ci siano potenziali rischi di brevetti nascosti per le aziende. Questa sezione sarà aggiornata non appena ci saranno nuove informazioni disponibili.»

Sebbene Theora non sia vincolato da nessun brevetto conosciuto, aziende come Apple e Nokia sono preoccupate per la possibilità che esistano brevetti nascosti, i cui proprietari potrebbero essere in attesa che una grossa compagnia usi il formato per poi reclamare il pagamento delle licenze. Apple, Microsoft e altre aziende detengono i brevetti del principale rivale, il formato H.264.
La rimozione del formato Ogg dalle specifiche è stata criticata, non sussistendo alcuna ragione per supporre che Theora sia vincolato da brevetti "nascosti", né essendo possibile accertarsi che brevetti "nascosti" esistano anche nel caso dell'H.264.

Apple, inoltre, si è opposta all'uso del formato Ogg nello standard HTML (che comunque non è obbligatorio) sostenendo che molti dispositivi supportano altri formati molto più facilmente e che l'HTML non ha mai imposto l'uso di un determinato formato su niente.

L'H.264/MPEG-4 AVC è più usato ed ha buone velocità, compressione, decoder hardware e qualità video, ma è coperto da brevetti. Tranne che in particolari casi, gli utilizzatori dell'H.264 devono pagare dei costi di licenza a MPEG LA, un gruppo di detentori di brevetti sull'H.264 che include Microsoft e Apple. Per questo motivo non è stato considerato adatto come codec unico per l'HTML5.

Acquisizione di On2 da parte di Google modifica

L'acquisizione di On2 Technologies da parte di Google ha portato alla creazione del progetto WebM, che utilizza il codec video open source e libero da brevetti VP8 in un contenitore Matroska con audio Vorbis. È supportato dai browser Google Chrome, Opera e Mozilla Firefox, oltre che da altri meno utilizzati.

Quando Google annunciò nel gennaio 2011 l'intenzione di rimuovere il supporto nativo all'H.264 in Chrome, ricevette critiche da molte parti, tra cui Peter Bright di Ars Technica e Tim Sneath di Microsoft (uno dei detentori dei brevetti sull'H.264), che comparò la mossa di Google con la dichiarazione dell'esperanto come lingua ufficiale degli Stati Uniti. Comunque, Haavard Moen di Opera Software ha fortemente criticato l'articolo di Ars Technica chiarendo il suo intento di promuovere il WebM nei suoi prodotti sulla base dell'apertura di Internet.

Supporto da parte dei browser modifica

Browser Sistemi operativi Ultima versione stabile Formati video supportati
 
Ogg 		 
MPEG 		 
WebM
Theora H.264 VP8 VP9
Android browser Android 4.4.4 “KitKat” (19 giugno 2014) Da 2.3 Da 3.0 Da 2.3 No
Chromium Tutti i supportati Da r18297 Installazione manuale[1] Da r47759 Da r172738
Google Chrome Tutti i supportati 44.0.2403.125 (28 luglio 2015) Da 3.0 Da 3.0[2] Da 6.0 Da 29.0
Internet Explorer Windows 11.0.21 (14 luglio 2015) Installazione manuale Da 9.0 Installazione manuale No
Windows Phone 11.0 (10 febbraio 2014) No Da 9.0 No
Windows RT 10.0 (14 febbraio 2011) Da 10.0
Konqueror Tutti i supportati 4.14.3 (11 novembre 2014) Da 4.4[3]
Microsoft Edge Windows 10 20.10240.16384.0 (29 luglio 2015) Da 17 Da 1.0 No No
Mozilla Firefox Windows 7+ 39.0 (2 luglio 2015) Da 3.5 Da 21.0 Da 4.0 Da 28.0
Windows Vista Da 22.0
Windows XP Installazione manuale
Linux Da 26.0
Android Da 17.0
macOS Da 34.0
Firefox OS Da 1.1
Opera Android 30.0.1856.93524 (24 giugno 2015) No Da 11.50 Da 15.0 Da 16.0
Symbian S60 12.0.22 (24 giugno 2012)
Windows Mobile 10.0 (16 marzo 2010)
Windows, macOS, Linux 30.0.1835.125 (14 luglio 2015) Da 10.50 Da 24.0 Da 10.60 No
Safari iOS 8.0.7 (30 giugno 2015) No Da 3.1 No No
macOS Installazione manuale Installazione manuale
Web Tutti i supportati 3.16.3 (18 maggio 2015) Da 2.28[4]

Diffusione dei formati modifica

Ad aprile 2010, quando l'iPad di Apple stava per essere lanciato, molti siti hanno cominciato ad offrire video in HTML5 col codec H.264 anziché in Flash per gli utenti identificati come iPad.

A maggio 2010 i video HTML5 non erano così diffusi come i video Flash, sebbene alcuni siti avessero cominciato ad utilizzare in via sperimentale i video in HTML5, tra cui Dailymotion (usando i formati Theora e Vorbis), YouTube (sia in H.264 che in WebM) e Vimeo (in H.264).

Secondo una nota di YouTube, l'elemento <video> attualmente non soddisfa tutte le esigenze del sito. La ragione principale di ciò è l'assenza di un formato standard, la mancanza di un sistema di protezione del contenuto e l'incapacità di mostrare i video a schermo intero. Anche Hulu non ha adottato l'HTML5 per l'impossibilità di adattare la banda disponibile all'utente e di proteggere i contenuti mostrati. Inoltre pure Netflix non ha adottato l'HTML5 per motivi analoghi.

L'11 gennaio 2011 il progetto Chromium di Google annunciò la rimozione del supporto ai codec chiusi (in particolare l'H.264) dai futuri rilasci di Chrome. L'annuncio specificava che la decisione era stata presa per aiutare la diffusione di un HTML5 libero da brevetti, favorendo l'uso dei codec open source VP8 e Theora.

Nell'aprile 2011 Google annunciò la conversione di tutti i video di YouTube in WebM cominciando dal 30% di quelli più visti.

Uso di più formati video contemporaneamente modifica

Nell'attesa che l'HTML5 Working Group stabilisca una volta per tutte quale debba essere il formato video ufficiale per l'elemento <video>, è possibile inserire nello stesso tag <video> diversi formati multimediali in modo che sia il browser a scegliere quale aprire. Per fare ciò si deve usare l'elemento <source>.

Ad esempio, supponendo di voler inserire in una pagina il video "esempio" nei tre formati Theora, H.264 e WebM, si deve utilizzare il seguente codice: 

<video poster="immagine.jpg" controls>
  <source src="esempio.ogv" type="video/ogg">
  <source src="esempio.mp4" type="video/mp4">
  <source src="esempio.webm" type="video/webm">
  <p>Questo testo viene visualizzato se il browser non supporta l'HTML5.</p>
</video>

Piattaforma esterna o interna modifica

Un video si può incorporare ospitandolo sul server del proprio sito web ("self hosting") o su una piattaforma esterna (YouTube, Vimeo,...)[5][6][7][8].

Server proprio Piattaforma esterna
PRO CONTRO PRO CONTRO
Totale privacy e controllo Tempi di caricamento della pagina più lunghi Dispositivi e browser diversi richiedono formati di file diversi. I servizi di terze parti sono in grado di convertire il file video. Tramite appositi servizi web il video è scaricabile[9]
Nessuno può scaricare, eliminare o vietare il video Se l'hosting privato non è particolarmente performante, la riproduzione può essere carente Larghezza di banda molto più alta dei comuni hosting privati Meno privacy e controllo
Nessun logo o watermark Riproduzione più lenta e meno affidabile Riproduzione più veloce Aspetto non completamente personalizzabile
Colori / aspetto completamente personalizzabili Nessuna promozione aggiuntiva al di fuori di ciò che il sito

ospitante fornisce

Il video non si fermerà finché non sarà finito, indipendentemente dalla velocità di Internet dell'utente Possibili watermark
Si mantengono i visitatori sulla propria pagina Potenziali clienti possono finire per caso sul video se si trova su una piattaforma esterna. Ciò non accade su un hosting privato Potenziali clienti possono finire per caso sul video Annunci di aziende esterne durante il video
Nessun annuncio o video suggerito alla fine del video SEO più limitata delle piattaforme

famose

SEO migliore (le piattaforme famose sono meglio indicizzate dei siti web privati) Possibile eliminazione del video se non risponde a certe regole

Confronto con altre tecniche modifica

Alcune animazioni create con varie tecniche visivamente sono identiche o molto simili ad un video incorporato con il tag <video>. Ogni tecnica ha pro e contro, a seconda delle proprie esigenze[10][11][12]:

 
Con diverse tecniche si può ottenere lo stesso risultato animato
GIF CSS animation Canvas\WebGL SVG <video>
PRO: semplicità di creazione,

adattabilità ai diversi dispositivi, salvabile dall'utente con tasto destro del mouse, nessuna programmazione

CONTRO: possibilità molto limitate, nessuna interattività

PRO: possibilità ampie, poco peso in KB, interattività

CONTRO: non sempre adattabile

a tutti i dispositivi, programmazione

necessaria non sempre facile

PRO: possibilità ampie, realismo 3D, interattività

CONTRO: non sempre adattabile

a tutti i dispositivi, programmazione

necessaria non sempre facile

PRO: possibilità ampie, nessun vincolo alla qualità in pixel, interattività

CONTRO: non sempre adattabile

a tutti i dispositivi, programmazione

necessaria non sempre facile

PRO: possibilità molto ampie con utilizzo di software avanzati di animazione come Premiere e After effects, adattabile

a tutti i dispositivi, possibilità di stop e ripresa del video da qualsiasi punto, sottotitoli in tutte le lingue, nessuna programmazione

CONTRO: nessuna interattività, file spesso pesanti, video scaricabile dall'utente con tasto destro del mouse

Sottotitoli modifica

Si possono creare sottotitoli in tutte le lingue a scelta dell'utente, visibili durante il video e anche scaricabili in formato TXT o altro[13][14]:

<video id="video" controls preload="metadata">
   <source src="video/uno.mp4" type="video/mp4">
   <source src="video/uno.webm" type="video/webm">
   <track label="English" kind="subtitles" srclang="en" src="captions/vtt/uno-en.vtt" default>
   <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/uno-de.vtt">
   <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/uno-es.vtt">
</video>

Stili CSS dei sottotitoli modifica

Si possono formattare i sottotitoli con diversi stili. Le principali proprietà CSS per farlo sono[15]:

  • color
  • opacity
  • visibility
  • text-decoration
  • text-shadow
  • background
  • outline
  • font
  • white-space

Esempio:

::cue(v[voice='Test']) {
   color:#ccc;
   background:#0055dd;
}

Uso come sfondo di un altro elemento HTML modifica

 
Esempio di video di sfondo in un DIV

Un video HTML5 si può inserire come sfondo di un altro elemento HTML, come un paragrafo, un DIV, o anche dell'intero sito web e fare in modo che sia responsivo. Se inserito come sfondo però, esattamente come un'immagine o un gradiente CSS 3, non potrà essere salvato dall'utente con tasto destro del mouse e "salva col nome" poiché sarà un video di decorazione e non di contenuto[16].

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

Formattazione modifica

Con CSS 3, Canvas, SVG e WebGL è possibile formattare il video incorporato con <video> e aggiungere effetti vari senza agire direttamente sul video con Adobe Premiere o altri software[17].

Elementi animati davanti al video modifica 

@keyframes overlay {
	30% {
		left: 0;
		width: 50%;
	}
	50% {
		background: #00f;
	}
	80% {
		left: 80%;
		width: 20%;
	}
	100% {
		left: 60%;
		width: 40%;
		background: #00f;
	}
}
figure#fashion {
	display: inline-block;
	position: relative;
	font-size: 0;
	margin: 0;
}
figure#fashion video {
width: 100%;

Filtri modifica

Si possono aggiungere filtri davanti al video[18] anche in modalità sfondo responsivo[19][20](seppia, vignetteatura, sfocatura...):

CSS 3 modifica 

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);

}

SVG modifica 

<video autoplay="true" id="vid" controls="controls" loop="loop">
  
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm" type="video/ogg"/>
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm" type="video/mp4"/>
</video>

<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blurEffect">
<feGaussianBlur stdDeviation="4"/>
</filter>
<filter id="turbulence">
<feTurbulence baseFrequency=".01" type="fractalNoise" numOctaves="3" seed="23" stitchTiles="stitch"/>
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="10,3" result="outBlur"/>
</filter>
<filter id="inverse">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>

Maschere modifica

Si possono creare maschere SVG o CSS3 ossia forme geometriche con all'interno un video[21][22].

SVG modifica 

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <mask> <text id="text" x="10" y="140" font-size="150" font-weight="bold" font-family="Verdana" fill="white">HELLO</text> </mask> </defs> <use xlink:href="#text"/> </svg>

CSS 3 modifica 

video { mask:url('#vmask'); box-image:url('text.svg'); margin:100px; }

Editing video con Canvas modifica

Si possono fare manipolazioni grazie a HTML5 Canvas come per esempio l'effetto Chroma Key[23].

var processor;

  processor.doLoad = function doLoad() {
    this.video = document.getElementById('video');
    this.c1 = document.getElementById('c1');
    this.ctx1 = this.c1.getContext('2d');
    this.c2 = document.getElementById('c2');
    this.ctx2 = this.c2.getContext('2d');
    let self = this;
    this.video.addEventListener('play', function() {
        self.width = self.video.videoWidth / 2;
        self.height = self.video.videoHeight / 2;
        self.timerCallback();
      }, false);
  },

Transizioni WebGL modifica

Si possono creare transizioni tra un video e l'altro con WebGL[24].

const curtains = new Curtains({
    container: "canvas",
    pixelRatio: Math.min(1.5, window.devicePixelRatio), 
});
const params = {
    vertexShaderID: "vertexShader",
    fragmentShaderID: "fragmentShader",
    uniforms: {
        transition: {
        name: "uTransition",
        type: "1f",
        value: 0,
        },
    },
};

const multiTexturesPlane = new Plane(
    curtains, 
    [...document.getElementsByClassName("plane")],
    params
);

Formattazione del video player modifica

Si può modificare anche il video player che mostra il video (ossia i bottoni, la barra di avanzamento del video, il contorno...)[25]. Un esempio con il CSS:

.controls button {
   border:none;
   cursor:pointer;
   background:transparent;
   background-size:contain;
   background-repeat:no-repeat;
}
.controls progress {
   display:block;
   width:100%;
   height:81%;
   margin-top:0.125rem;
   border:none;
   color:#00ccff;
   border-radius:2px;
}

Esempi modifica

  •  
    Esempio di effetto Chroma Key in un video fatto con Canvas.
  •  
    Esempio di maschera SVG in un video (con CSS3 si può ottenere lo stesso effetto)
  •  
    Esempio di filtro SVG (con CSS3 si può ottenere lo stesso effetto)

Note modifica

  1. ^ Sono disponibili pacchetti codec di terze parti.
  2. ^ L'11 gennaio 2011 sul blog di Chromium è stata annunciata la rimozione del supporto all'H.264; tuttavia al 25 aprile 2024 esso non è ancora stato rimosso e non sono stati fatti ulteriori annunci al riguardo.
  3. ^ Qualunque formato supportato da Phonon su Qt 4.5.
  4. ^ Qualunque formato supportato da GStreamer su Webkit/GTK+.
  5. ^ (EN) YouTube videos vs self-hosted: Which one is better for you?, su Liquid Light. URL consultato il 10 febbraio 2021.
  6. ^ (EN) Tim Neighbors, Self-Hosting Video Content -Pros and Cons, su Video Production by Invisible Harness, 6 luglio 2017. URL consultato il 10 febbraio 2021.
  7. ^ (EN) Website Usability: YouTube Player vs. Self-Hosted Video, su The latest Voice of Customer and CX trends | Usabilla Blog, 4 agosto 2015. URL consultato il 10 febbraio 2021.
  8. ^ Tumblr vs. Wordpress for Bands, su Small Business - Chron.com. URL consultato il 10 febbraio 2021.
  9. ^ FREE YouTube Downloader - Scaricare Video da Youtube Gratis -Download Veloce - YouTube to MP4, su Freemake. URL consultato il 10 febbraio 2021.
  10. ^ (EN) HTML Animation vs GIF vs Video - Hippani, su hippani.com. URL consultato il 10 febbraio 2021.
  11. ^ (EN) WebGL - Animation, su webglfundamentals.org. URL consultato il 10 febbraio 2021.
  12. ^ (EN) 15 Canvas Animation Inspiration - HTML & CSS Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀, su codemyui.com. URL consultato il 10 febbraio 2021.
  13. ^ (EN) Download subtitles from Youtube, Viki, Viu, Vlive and more, su downsub.com. URL consultato il 10 febbraio 2021.
  14. ^ Scarica i sottotitoli da Youtube, Facebook, Viki, Dailymotion e altro, su savesubs.com. URL consultato il 10 febbraio 2021.
  15. ^ Adding captions and subtitles to HTML5 video - Developer guides | MDN, su developer.mozilla.org. URL consultato il 10 febbraio 2021.
  16. ^ (EN) Full Page Background Video Styles, su CSS-Tricks, 28 maggio 2017. URL consultato il 10 febbraio 2021.
  17. ^ (EN) Dudley Storey, HTML5 Video Effects with CSS Blend Modes, su the new code. URL consultato il 10 febbraio 2021.
  18. ^ filtri, su codepen.io.
  19. ^ filtri, su codepen.io.
  20. ^ filtri svg, su codepen.io.
  21. ^ Working with Scalable Vector Graphics (SVG) in HTML5 Video Element, su mrbool.com. URL consultato il 10 febbraio 2021 (archiviato dall'url originale il 6 maggio 2021).
  22. ^ svg, su codepen.io.
  23. ^ Manipulating video using canvas - Web APIs | MDN, su developer.mozilla.org. URL consultato il 10 febbraio 2021.
  24. ^ (EN) Team Codrops, WebGL Video Transitions with Curtains.js, su Codrops, 7 ottobre 2020. URL consultato il 10 febbraio 2021.
  25. ^ Video player styling basics - Developer guides | MDN, su developer.mozilla.org. URL consultato il 10 febbraio 2021.

Altri progetti modifica

Collegamenti esterni modifica

  Portale Internet: accedi alle voci di Wikipedia che trattano di internet
Estratto da "https://it.wikipedia.org/w/index.php?title=HTML5_video&oldid=134588396"