I migliori HTML5 Video Player per WordPress!

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

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"/]

Vai alla pagina del plugin

MediaElement.js – HTML5 Video & Audio Player

MediaElement

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.

Vai alla pagina del plugin

JW Player for WordPress

jw-player

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"]

Vai alla pagina del plugin

Projekktor Video Tag Extension

Projekktor

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:

Vai alla pagina del plugin

SublimeVideo – HTML5 Video Player

sublimeVideo

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.

Vai alla pagina del plugin

VideoJS – HTML5 Video Player for WordPress

VideoJS

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.

Vai alla pagina del plugin

Hana Flv Player

hana 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=""
/]

Vai alla pagina del plugin

Cool Video Gallery

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.

Vai alla pagina del plugin

HTML5 Video Player WordPress

html5-video-plugin

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…

Vai alla pagina del plugin

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.

performance plugin video

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 🙂

VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione
  
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
9 Commenti
  • Grazie stavo giusto cercando un modo per inserire dei video su WP, mi hai salvato dalla ricerca!

  • Ottimo articolo come sempre Roberto!
    Stavo valutando proprio di inserirne uno

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

  • 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”
    /]

    • Roberto Iacono

      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 ?

  • 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

    • Roberto Iacono

      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 …

      • 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