Pubblicato da Se possiedi un sito web ed hai dei video che vuoi caricare senza però passare necessariamente da youtube o da altre piattaforme esterne, esiste comunque la possibilità di caricare i video sul tuo sito internet e poi di farli girare tramite un apposito player fatto in html5.
Ora dunque, ti spiegherò come inserire un lettore video in html5 sul tuo sito web.
Il metodo più veloce per avere un video player in html5 che supporti la maggior parte di formati video codec in circolazione (H.264, WebM, Ogg Theora, mp4, avi, mpeg, ecc...), nonchè la maggior parte dei browser, è quello di usare un player video che utilizzi html, javascript e css sviluppato da terze parti: VideoJS.
Grazie a VideoJS infatti, è possibile includere sul proprio sito una piccola e leggera libreria javascript, da richiamare nelle pagine dove andrà incluso il codice html del video player.
Vediamo dunque i passaggi da seguire:
- Scaricare ed includere il codice javascript della libreria del player nelle pagine dove si vuol far apparire il video
- Caricare sul proprio sito il video che si vuole far girare
- Includere il codice html del player video, facendolo puntare al video e personalizzandolo
In realtà il punto 1 e 2 potrebbero anche essere fatti in parte, nel senso che non è necessario per forza avere video e javascript (e css) sul proprio sito.
I javascript infatti, possono essere inclusi facendoli puntare come vi mostrerò tra poco, ed il video potrebbe invece trovarsi altrove, tipo su uno spazio google.
Così potrai far vedere video sul tuo sito senza passare da youtube, anche su piattaforme chiuse come blogger.
Vediamo dunque più nel dettaglio come fare.
Includi il codice javascript del player video dentro il tag head del tuo sito web:
<head>
<link href="http://vjs.zencdn.net/5.11.6/video-js.css" rel="stylesheet">
<!-- IE8 support -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
E poi copia dentro il body il codice del player seguito da un altro javascript:
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="IMMAGINE-COPERTINA-VIDEO.jpg" data-setup="{}">
<source src="IL-MIO-VIDEO.mp4" type='video/mp4'>
<source src="IL-MIO-VIDEO.webm" type='video/webm'>
<p class="vjs-no-js">Il tuo browser non supporta questo video, sorry</p>
</video>
<script src="http://vjs.zencdn.net/5.11.6/video.js"></script>
</body>
Vediamo dunque nel dettaglio i principali tag ec attributi personalizzabili:
- Dentro il tag video, puoi cambiare le dimensioni width ed height.
- Dentro il tag source, cambia l'src con l'url dove è presente il tuo video (mp4 o webm, o entrambi)
- Nel paragrafo che usa la classe vjs-no-js puoi invece mettere il messaggio d'avviso per chi ha un browser talmente vecchio da non supportare questo genere di video.
Il risultato finale sarà una cosa del genere:
Tutta la documentazione su come personalizzare questo fantastico video player la trovi comunque sul sito ufficiale di VideoJS:
http://videojs.com/
Buona videoteca :)
Piaciuto l'articolo? Lascia un commento!
EmoticonEmoticon