TemplateMonster Blog Italia

7 migliori riproduttori video HTML5 ottimizzati per il web

Natalia
Video Player 00

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>.

  1. Google Chrome v4.0+
  2. Mozilla Firefox v3.5+
  3. Safari v4.0+
  4. Internet Explorer v9.0+
  5. Opera v10.5+

Video JS

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.

Riproduttore Video Cloudinary

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:

  1. I parametri che modificano i temi skin, visualizzazione dei titoli e sottotitoli e le preferenze dell’utente di base simili.
  2. Gli eventi che consentono agli utenti di eseguire le operazioni da interattive e passive e le azioni nel lettore.
  3. L’accesso all'API Video.js per abilitare il controllo a basso livello e la personalizzazione degli elementi del player.

JW Player

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

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

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>

Projekktor Player

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

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>

In conclusione

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