HTML5, l'ultimo standard HTML viene fornito in bundle con molti nuovi attributi ed elementi, che aiutano a migliorare la semantica,le prestazioni, la connettività, la grafica 2D e 3D, l’accesso ai dispositivi e lo stile sul web.
Prima di HTML5, i video potevano essere riprodotti solo sui browser con l'aiuto di plugin come Flash. Lo sviluppo di template HTML5 ha comportato una modifica e convertito i file audio e video in prodotti di prima scelta sul Web consentendo la manipolazione dei contenuti multimediali utilizzando il tag <audio> e <video>.
Con l'avvento di HTML5, gli utenti sono ora in grado di integrare i riproduttori video nativi del browser all'interno dell’applicazione senza la necessità di utilizzare i plugin o script di terze parti. Il seguente elenco contiene le versioni del browser che supportano completamente il tag <video>.
Un riproduttore video HTML5 è open source e gratuito, Video JS è costruito utilizzando CSS e JavaScript. Video JS viene eseguito su oltre 400.000 siti web con oltre 15.000 stelle su Github. Viene fornito con il supporto integrato per Flash.
Un vantaggio chiave di Video JS è ,che è personalizzabile. La skin del riproduttore è costruita utilizzando CSS e HTML e può essere personalizzata in base alle preferenze dell'utente.
Per installare il riproduttore video Video JS, gli utenti devono prima aggiungere i file JavaScript e CSS richiesti dal CDN all'elemento <head>, come indicato di seguito:
<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/5.11/video.min.js"></script>
Una volta fatto, il tag <video> può essere aggiunto al corpo, come viene mostrato di seguito:
<video id="my-player" class="video-js" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" data-setup='{}'> <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source> <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source> <p class="vjs-no-js"> Per visualizzare questo video, abilita JavaScript e considera l'aggiornamento a un browser web <a href="http://videojs.com/html5-video-support/" target="_blank"> supporto HTML5 video </a> </p> </video>
È fondamentale garantire che una classe di video-j sia aggiunta al tag <video>. Dopo il caricamento della pagina, Video JS individua l'elemento e imposta un riproduttore per l'utente.
Il riproduttore video HTML5 Cloudinary ha molte funzionalità ed è pronto per l'analisi. Alcune delle sue caratteristiche principali includono:
Oltre a ciò, Cloudinary supporta anche la personalizzazione. Gli utenti possono personalizzare i seguenti aspetti:
JW Player è un robusto riproduttore video HTML5 ricco di funzionalità che si adatta perfettamente ai browser mobili e desktop. Una piattaforma di hosting video, JW Player, consente agli utenti di caricare video in streaming a 360 gradi.
JW Player è ora disponibile su oltre 2 milioni di siti Web e supporta le seguenti funzionalità:
jPlayer è essenzialmente un plugin di query che viene utilizzato come un riproduttore video e audio HTML5 per jQuery. Supporta quanto segue:
Per installare jPlayer, puoi utilizzare la seguente riga di comando nel tuo browser:
bower installa jplayer
In alternativa, puoi anche usare il compositore di PHP:
compositore richiede happyworm/jPlayer
JPlayer funziona sui diversi browser: Android 2.3+, Firefox, IE6 +, Chrome, Opera Safari e Mobile Safari.
Flowplayer è un riproduttore video HTML5 che offre le seguenti funzionalità:
Per installare Flowplayer, utilizza la seguente riga di comando:
npm installa flowplayer-api cd flowplayer-api installa
Se desideri caricare i video in blocco utilizzando Flowplayer, puoi utilizzare
flowplayer -U <username> -P <password> videos/*.mov
Per poter utilizzare Flowplayer in un'app, è possibile scaricare questo software e collegare CSS e JavaScript come indicato di seguito:
<!DOCTYPE html> <head> <!-- flowplayer dipende da jQuery 1.7.1+ (per adesso) --> <script type="text/javascript" src="//ss/ajax/libs/jquery/1/jquery.min.js"></script> <!-- flowplayer.js --> <script type="text/javascript" src="flowplayer.min.js"></script> <!-- player styling --> <link rel="stylesheet" type="text/css" href="flowplayer/minimalist.css"> </head> <body> <!-- player 1 --> <div class="flowplayer"> <video src="my-video.mp4"></video> </div> <!-- player 2 --> <div class="flowplayer"> <video> <source type="video/webm" src="my-video2.webm"> <source type="video/mp4" src="my-video2.mp4"> </video> </div> </body>
Un altro riproduttore HTML5 open source e gratuito è Projekktor Player. Questo giocatore ha le seguenti capacità:
Projekktor Player è costruito usando jQuery. Quindi, per poter integrare il player in un'applicazione, gli utenti dovrebbero importare jQuery e i file JavaScript e CSS richiesti come mostrato di seguito:
<!-- Carica il tema del riproduttore --> <link rel="stylesheet" href="themes/maccaco/projekktor.style.css" type="text/css" media="screen" /> <!-- Carica jquery --> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <!-- Carica projekktor --> <script type="text/javascript" src="projekktor.min.js"></script>
Una volta terminato, il player può essere impostato su un tag <video> dopo aver specificato il parametro id e includendo la funzione projekktor dopo il caricamento della pagina:
<html> <body> <video id="player_a" class="projekktor" poster="intro.png" title="questo è projekktor" width="640" height="360" controls> <source src="http://www.projekktor.com/intro.ogv" type="video/ogg" /> <source src="http://www.projekktor.com/intro.mp4" type="video/mp4" /> </video> <script type="text/javascript"> $(document).ready(function() { projekktor('#player_a', { volume: 0.8, playerFlashMP4: 'http://www.yourdomain.com/StrobeMediaPlayback.swf', playerFlashMP3: 'http://www.yourdomain.com/StrobeMediaPlayback.swf' }); }); </script> </body> </html>
Acorn Media Player è un riproduttore HTML5 che si concentra sull'accessibilità. Acorn Media Player ha le seguenti funzionalità:
Poiché Acorn Media Player è essenzialmente un plugin jQuery, per poter aggiungere il player a un'applicazione, gli utenti devono anche includere jQuery, come mostrato di seguito:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="/path/to/jquery.acornmediaplayer.js"></script> <link href="/path/to/acornmediaplayer.base.css" rel="stylesheet" type="text/css"> <link href="/path/to/themes/acorn.theme.css" rel="stylesheet" type="text/css"> <script> $(document).ready(function() { $('video').acornMediaPlayer(); }); </script> </head> <body> <video> <source src="/path/to/video.mp4" /> </video> </body> </html>
Sebbene oggi siano disponibili i diversi riproduttori video HTML5, è probabile che non tutti siano adatti al tuo scopo. L'idea di questo articolo è di annotare le capacità e i vincoli dei riproduttori più popolari sul mercato.
Se hai dei suggerimenti o se pensi che abbiamo rappresentato un buon riproduttore video, facelo sapere nei commenti.
***
Questo articolo è stato tradotto da inglese. L’originale puoi trovare qui: 7 Best HTML5 Video Players Optimized for the Web