I migliori HTML5 Video Player per WordPress!
Fino ad oggi, o meglio, fino a ieri, la maggior parte dei video venivano visualizzati sulle pagine web grazie a dei plugin, come ad esempio il famoso flash. Purtroppo, ogni browser supportava, e supporta tuttora, plugin differenti, quindi?
Un vero casotto!
Con l’arrivo del markup HTML5 è stato definito un nuovo elemento che specifica un modo standard per inserire i video all’interno delle pagine web, l’elemento <video>. Questo metodo di inserire i video, chiamato HTML5 Video, è così supportato da tutti i browser più moderni, finalmente!
La community di WordPress poteva rimanere indietro a questo grande passo? Certo che no. Per questo motivo sono stati sviluppati molti plugin per gestire i video con il markup HTML5. Ecco quelli che secondo me sono tra i migliori HTML5 Video Player per WordPress:
SZ – Video for WordPress
Plugin dell’amico Massimo della Rovere, che permette di inserire HTML5 Video in completo stile responsive, per adattarsi alla visualizzazione sui dispositivi mobile, sfruttando il player Flowplayer.org.
Permette l’inserimento dei video dalla galleria nativa di WordPress e anche da CDN per lo streaming. Supporta anche video da risorse esterne come Youtube, Vimeo e DailyMotion, ma in questo caso non viene utilizzato l’HTML5.
Caratteristiche da mettere in evidenza:
- 3 tipi di player (minimale, funzionale, completo)
- estensioni .MP4, .WebM, .Ogg
- responsive design
- supporto al markup Schema.org (utilizzato dai social network per recuperare le informazioni dei video)
- aggiunta pulsante all’editor di WordPress per inserire lo shortcode utilizzato per mostrare il video player
- possibilità di selezionare l’immagine di anteprima del video
Come inserire il video all’interno del blog? Tramite un semplice shortcode:
[sz-video url="url" width="opzionale" height="opzionale"/]
MediaElement.js – HTML5 Video & Audio Player
Inserisce un player video e audio in puro HTML5 e CSS.
Opzioni da evidenziare:
- dimensioni personalizzabili
- 3 skin (la WMP è bellissima!)
- audio
- autoplay
- preload
- selezione immagine anteprima
Supporta di tutto:
- iPhone, iPad, Andriod
- MP4, Ogg, WebM, WMV, MP3, WAV, WMA files
- WebSRT file (testo in formato HTML5 sincronizzato, stile sottotitoli)
Come inserire il player all’interno di WordPress? Con uno shortcode:
o tramite un codice php.
JW Player for WordPress
Plugin sviluppato dalla LongTail Video, i creatori del JW Player. Permette in inserire facilmente all’interno dei tuoi articoli o pagine di WordPress, il lettore JW Player che supporta video HTML5 e Flash.
Offre una buona dose di personalizzazioni, come:
- la posizione della barra di controllo
- 19+ skin, le dimensioni
- autostart
- colori e icone
- playlist con possibilità di selezionare il metodo shuffle (riproduzione casuale dei video) e la ripetizione del singolo video
- opzioni audio
- rendering
- sistema pubblicitario LongTail AdSolution
- selezione dell’immagine da visualizzare a video fermo
Interessante la possibilità di aggiungere in automatico il codice Open Graph, che viene utilizzato da Facebook per leggere le informazioni del video stesso. Oltre a ciò, ha anche la possibilità di integrare i pulsanti sociali come il tweet, il like e lo sharing (generale), ottima idea!
Supporta sia i video della libreria nativa di WordPress che quelli esterni come Youtube e RTMP.
Fai attenzione che al momento non ha licenza commerciale.
Ovviamente gestisce più player personalizzati 🙂
Come si inserisce il player all’interno del blog? Con uno shortcode del tipo:
[jwplayer config="nome-del-player" file="http://www.youtube.com/watch?v=DsgXCscqoqc" image="http://oggiscienza.files.wordpress.com/2012/04/steve-jobs1.jpg"]
Projekktor Video Tag Extension
Ottimo plugin basato sulla versione gratuita GPL del player Projekktor.
Interessante la possibilità di aggiungere il proprio logo sopra ai video!
Altre caratteristiche da menzionare:
- selezione delle dimensioni del player
- 6 skin, molto professionali e belle
- aggiunta dei pulsanti sociali in overlay al video
- selezione dell’immagine di anteprima statica
- personalizzazione dei messaggi per i social
- personalizzazione dei messaggi d’errore
Si inserisce tramite shortcode:
SublimeVideo – HTML5 Video Player
Supporta la visualizzazione dei video HTML5 su tutti i dispositivi mobile, ma richiede una registrazione gratuita per accedere a:
- supporto video SD/HD
- lightbox
- playlist
- statistiche Real-Time
- pulsante per inserire gli shortcode necessari a visualizzare il player
Molto bello l’effetto lightbox, leggero ma professionale.
VideoJS – HTML5 Video Player for WordPress
Video player HTML5 molto semplice, con poche personalizzazioni ma con un’interessante funzionalità:
- Responsive video, che adatta il video alla visualizzazione sul dispositivo mobile
Aggiunge il pulsante all’editor di WordPress per semplificare l’inserimento del player tramite shortcode.
Hana Flv Player
Permette in inserire video flash FLV all’interno degli articoli o pagine di WordPress. Inoltre, supporta anche video HTML5.
È sotto licenza GPL, quindi puoi usarlo in qualsiasi tipo di sito web.
Per poter funzionare sui dispositivi della mela mordicchiata, devi selezionare MediaElement.js o FlowPlayer5 come player, perchè il normale player Flash non è supportato. I filmati FLV non sono supportati dai dispositivi Apple, per cui dovrai convertire i filmati in mp4.
Funzioni da evidenziare:
- dimensioni personalizzabili
- autoplay
- autoloop
- tracciamento degli eventi (start, stop, categorie, ecc)
- skin
- selezione dell’immagine da visualizzare a video fermo
Ottima la possibilità di inserire il player grazie al pulsante che viene aggiunto nell’editor di WordPress.
Per poterlo utilizzare all’interno del blog, si utilizza uno shortcode del tipo:
[hana-flv-player video="http://www.youtube.com/watch?v=DsgXCscqoqc" width="400" height="320" description="Sarah is having fun in a merry-go-round" clickurl="http://localhost/robertoiacono" clicktarget="_blank" player="4" autoplay="false" loop="false" autorewind="true" splashimage="http://localhost/robertoiacono/wp-content/plugins/hana-flv-player/splash.jpg" skin="" /]
Cool Video Gallery
Permette di gestire ed inserire in maniera molto semplice una galleria di video (o uno solo) all’interno degli articoli di WordPress.
Grazie al pulsante che viene aggiunto automaticamente all’editor di WP, è possibile inserire la galleria desiderata in stile:
- showcase
- slideshow
- playlist
oppure un semplice video (devono essere tutti associati alla galleria).
Il video viene gestito tramite il JW Player e si può aprire:
- in pop-up
- embed
Plugin molto personalizzabile, ottima l’idea di creare più gallerie per gestire meglio i contenuti, permettendo la gestione dei video propri e dei video esterni (come youtube).
Altre funzionalità interessanti:
- generazione automatica dell’anteprima
- Google XML Video Sitemap
- integrazione con l’editor TinyMCE
- supporto HTML5
- aggiunta del pannello del plugin alla barra di amministrazione
- ordinare i video in base alla data
- visualizzazione casuale dei video
- supporto dei file H.264 (.MP4, .mov, .m4v), FLV (.flv) e MP3 (.mp3).
Come si inserisce nel blog? Tramite shortcode che viene generato con il pulsante aggiunto nell’editor.
HTML5 Video Player WordPress
Se cerchi un video player HTML5 professionale, beh, l’hai trovato! Il plugin è a pagamento, non l’ho provato personalmente, ma la grafica che puoi vedere dall’anteprima live è eccezionale!
Ecco le caratteristiche da evidenziare:
- 5 skin
- possibilità di scegliere se mostrare la playlist a sinistra, in basso o non mostrarla
- supporta .MP4 e .WebM
Più le classiche opzioni come la possibilità di regolare le dimensioni del player, visualizzazione casuale, loop, autoplay…
Performance
Ecco le performance dei vari plugin che ho estratto con il plugin P3 nella mia installazione di WordPress in locale, senza traffico e senza altri plugin aggiuntivi.
Probabilmente usare Jw Player Plugin e Cool Video Gallery non è una buona scelta 🙂
Conclusioni
Dopo questa carrellata di plugin molto interessanti ti voglio solo ricordare che se vuoi inserire solamente qualche video esterno al tuo blog, WordPress è dotato della funzionalità oEmbed che permette di embeddare (che termine nerd 😉 ) un video di Youtube, Vimeo, DailyMotion, Qik, Viddler e WordPress.tv, solamente aggiungendo l’URL del video all’interno dell’articolo o pagina, come mostro in questo articolo. Il codice non è HTML5, ma vale veramente la pena installare un Video Player per gestire pochi video?
Hai altri HTML5 Video Player per WordPress da segnalare? Quale ti è piaciuto di questi? Lascia il tuo pensiero nei commenti qui sotto 🙂
01/03/2013 alle 15:12
Grazie stavo giusto cercando un modo per inserire dei video su WP, mi hai salvato dalla ricerca!
02/03/2013 alle 15:18
Ottimo articolo come sempre Roberto!
Stavo valutando proprio di inserirne uno
03/03/2013 alle 16:00
Grazie Roberto. Ottimo articolo e bella idea presentare oltre alle caratteristiche principali il codice da utilizzare per inserire il video. Mi trovi d’accordo sulla condivisione della conoscenza!
Complimenti anche per il blog…molto bello e usabile.
04/03/2013 alle 15:38
Ti ringrazio Mauro! 🙂
09/03/2013 alle 14:58
inserisco il codice ma poi mi dice strem not found..Cosa sbaglio?
[hana-flv-player
video=”http://http://www.youtube.com/watch?v=kz4cj84KXS4/wp-content/plugins/hana-flv-player/babyhana.flv”
width=”400″
height=”320″
clickurl=”http://www.youtube.com/watch?v=kz4cj84KXS4/”
player=”2″
autoplay=”false”
loop=”false”
autorewind=”true”
splashimage=”http://yourwebsite.com/wp-content/plugins/hana-flv-player/splash.jpg”
/]
11/03/2013 alle 17:52
Sicuramente l’URL del video, hai messo:
video=”http: // http: //www.youtube.com/watch?v=kz4cj84KXS4/wp-content/plugins/hana-flv-player/babyhana.flv”
non dovrebbe essere solo http : //www.youtube.com/watch?v=kz4cj84KXS4 ?
04/04/2013 alle 16:13
Ciao,
Articolo molto interessante!
Mi piacerebbe sentire la vostra opinione su questa cosa: vorrei caricare dei video come contenuto premium in un sito WordPress. Nel senso che all’utente che desidera visualizzare i video verrà chiesta una piccola donazione, mentre altri contenuti saranno pubblici e fruibili da tutti.
Voi quale plugin video consigliate per rendere più difficile possibile il download dei video?
Grazie
06/04/2013 alle 11:19
Ciao Ruggero,
così su due piedi, creerei un’area riservata e ci metterei i video privati caricati tramite Vimeo (o forse anche Youtube), ma è oslo un’idea …
07/04/2013 alle 20:41
Ciao Roberto,
ho già creato l’area riservata con Are PayPal http://wordpress.org/extend/plugins/are-paypal/ per semplicità. Poi se le cose evolvono acquisto un plugin più sofisticato per gestire le membership. Ora Provo i video plyer, vorrei evitare di caricarli direttamente in YouTube: troppo facile scaricarli 🙂
Ciao e grazie per gli articoli