Inserire un video in una pagina web HTML5 con supporto IE e iPhone
By Andrea Marchetti
@marchetti_design
Spesso quando si ha la necessità di inserire un video in una pagina web si utilizzano servizi “esterni” come Youtube o Vimeo. Può capitare però, per svariati motivi, di voler ospitare il video sul propio server, in questo caso nascono problemi di visualizzazione sui Browser e i Dispositivi Mobile.
JW Player
Per risolvere questi problemi utilizzeremo JW Player uno dei player video più diffusi in rete. Per scaricare il player bisogna registrarsi sul sito, inserendo la propia mail:
http://www.jwplayer.com/download/
Fatto questo si potrà scaricare il file javascript da inserire nell’header della nostra pagina.
Il file a inserire nell’header sarà del tipo:
<script src="http://jwpsrv.com/library/MIOFILE.js"></script>
HTML
Definiamo il codice html necessario.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><title>Video Html 5 Browser</title>
<!– JW Player Script –>
<script src="http://jwpsrv.com/library/FfMxTl3oEeSEiiIACxmInQ.js"></script>
</head>
<body><div id="mediaplayer"></div>
</body>
</html>
Javascript
Inizializziamo il player. Dopo il div mediaplayer aggiungiamo il codice dove definiamo il percorso del video e altri parametri.
<script>
jwplayer("mediaplayer").setup({
file: "timelaps.mp4",
width: "100%",
height: "100%",
stretching: "bestfit",});
</script>
Il video da caricare e inserire nello script deve essere un mp4 con larghezza massima di 1000/1100px.
Responsive
Per rendere il player responsive dobbiamo impostare i parametri height: 100%, width: 100% e stretching: bestfit (nello script di configurazione).
CSS
Aggiungiamo il seguente CSS nell header per rendere il contenitore del player largo come l’intera larghezza della pagina.
<style>html,body { height:100%; width:100%; padding:0; margin:0; }
#mediaplayer{height:100%;width:100%; padding:0; margin:0;}</style>
Cosi renderemo il nostro player responsive, visibile su desktop e dispositivi mobile.
Questa soluzione è stata testata su Firefox, Chrome, Safari ed Internet Explorer fino alla versione 8. Su dipositivi mobile è stato testata con su IOS 7/8 e Android.
Demo e download sono disponibili qui di seguito, Stay Tuned!