HomePlugin per WordPressSZ-Video plugin per WordPress

SZ-Video plugin per WordPress

Modificato il -   - Massimo Della Rovere

Con questo plugin è possibile inserire nei post la condivisione di filmati video, sia se sono dei filmati Youtube, Vimeo, DailyMotion che filmati personali presenti direttamente sul vostro sito web o anche su una CDN come ad esempio Amazon CloudFront. L’inserimento del video sul proprio articolo verrà effettuato con l’inserimento di particolari shortcode messi a disposizione. Il plugin è fornito anche con un semplice pannello di amministrazione dove potete inserire i parametri di personalizzazione ed attivare i shortcode. Tutto quanto con tecnologia HTML5.

Per il momento sono messi a disposizione tre tipi di shortcode, uno specifico per i filmati Youtube, uno per l’inserimento di filmati memorizzati localmente e l’ultimo per la visualizzazione di filmati che necessitano la funzione di streaming e quindi memorizzati su una CDN. Cerchiamo di vedere uno per uno le caratteristiche di utilizzo e le differenze tra i vari utilizzi possibili:

Video per WordPress

Descrizione metodo per inserimento Video

sz-video: Questo codice rappresenta lo shortcode video generico, infatti utilizzando questo shortcode potete inserire tutti i tipi di file video che saranno selezionati in base alla stringa indicata nel parametro “url”. A secondo del domino specificato in url=”valore” verranno richiamati i shortcode specifici che vedremo a seguire, i quali posso essere usati anche in maniera diretta senza dover utilizzare il codice sz-video ad uso generico. Potete utilizzare il metodo che preferite rispetto alle vostre esigenze.

Nel caso in cui nell’indirizzo URL non venga specificato nessun dominio legato a servizi esterni, come ad esempio Youtube, Vimeo e DailyMotion il video sarà visualizzato con l’utilizzo del player interno basato sul software di Flowplayer.og in licenza GPL. In realtà di questo software ne esiste anche una versione commerciale che differisce da quella free solo per la possibilità di inserire un logo personalizzato nell’interfaccia grafica del player video.

Vi riporto qui di seguito un esempio di shortcode da utilizzare, in ogni caso sappiate che viene messo a disposizione tramite l’editor standard WordPress un’icona per eseguire questa funzione automaticamente con la presentazione di una finestra pop up e i parametri permessi.

[sz-video url="url" width="opzionale" height="opzionale"/]

Se è la prima volta che installate il plugin e volete subito vedere il funzionamento potete usare il valore speciale “demo” come stringa URL del comando, in questo modo sarà caricato il codice del player interno e la visualizzazione di un video demo memorizzato insieme al plugin.

[sz-video url="demo"/]

Se non specificate nessun valore rispetto alla dimensione verranno applicati degli automatismi secondo la seguente regola: Se nelle opzioni è presente l’impostazione (Responsive Size=Yes) allora le dimensioni specificate non valgono in quanto il video si adatta automaticamente alla dimensione del contenitore, se invece è specificato (Responsive Size=No) verranno prese come dimensioni quelle specificate nel pannello di configurazione che per default = 600×400. Ovviamente queste dimensioni possono essere forzate in questa maniera:

[sz-video url="url" responsive="Y"/]
[sz-video url="url" width="500" height="250"/]
[sz-video url="url" width="500" height="250" responsive="N"/]

Anche i valori dei margini che indicano la distanza del contenitore del video dal testo circostante è un valore che è specificato nelle opzioni generali di configurazione, però come per tutti gli altri parametri potete modificarli anche direttamente sul vostro shortcode:

[sz-video url="url" margintop="10" marginbottom="20" units="px"/]

Molte volte abbiamo la necessità di non dover caricare subito il codice embed di Youtube, ad esempio se su una pagina dovessimo ripetere per molte volte lo shortcode, le performance sarebbero scadenti e in fondo perché facciamo caricare al browser un sacco di codice che sicuramente l’utente non userà in quanto selezionerà magari solo un filmato dei tanti presenti.

Per risolvere questo problema possiamo caricare solo l’immagine del video facendo partire il caricamento del codice embed solo se l’utente clicca sull’immagine del video selezionato. Questo comportamento è possibile sempre specificarlo nelle opzioni di configurazione generali, ma in ogni caso possiamo forzare l’utilizzo direttamente sullo shortcode:

[sz-video url="url" method="N"/] // Non viene caricato
[sz-video url="url" method="Y"/] // Viene subito caricato

Nello shortcode possiamo anche indicare i parametri che riguardano la visualizzazione del video, ad esempio possiamo forzare la partenza del video durante il caricamento della pagina o eseguire un caricamento del video infinito e quindi la ripartenza automatica ogni volta che finisce.

[sz-video url="url" autoplay="Y" loop="Y"/]

Demo Live per inserimento video nel blog

Se volete vedere in funzione il plugin prima di installarlo potete visitare le pagine del sito dedicate alla demo online, trovate la pagina con Demo Live Embed e la pagina Demo Live HTML5, se invece volete provare il funzionamento sull’ultima versione di WordPress disponibile andate sul seguente indirizzo SZ-Video Demo Live (ultima versione) dove trovate un’installazione di prova. Per installare il plugin usate il pannello di amministrazione e cercate la parola sz-video altrimenti se volete scaricare il file .ZIP contenente i file andate sul Reposity Ufficiale WordPress.

Attenzione al formato video in HTML5

Quando specificate un file nel parametro url dello shortcode in realtà specificate solo uno dei tanti formati che i vari browser possono leggere, e purtroppo dato che non esiste un formato che vada bene per tutti browser, ognuno di essi si seleziona quello più adatto da una lista di url presente nel tag HTML5 <video>. Per svolgere questa funzione il plugin aggiunge automaticamente i formati mancanti al codice HTML5 generato, però è ovvio che i vari formati video e le dovute conversioni devono essere presenti nello stesso indirizzo URL con estensione diversa, infatti se ad esempio voi specificate nello shortcode il file miodominio/miofile.mp4 il codice generato sarà:

<video>
  <source type="video/webm" src="http://miodominio/miofile.webm">
  <source type="video/mp4"  src="http://miodominio/miofile.mp4">
  <source type="video/ogg"  src="http://miodominio/miofile.ogv">
</video>

Se volete disattivare questo automatismo dovete disattivare l’opzione “aggiungi formati video” dal menu di configurazione sotto il menu sz-video => player HTML5, se volete disattivare questa funzione per un solo video e non nella configurazione generale basta utilizzare nello shortcode specifico il parametro onlyurl=”y” e non saranno aggiunti gli altri formati:

[sz-video url="http://miodominio/miofile.mp4" onlyurl="Y"/]

Questo shortcode genera il seguente codice HTML5:

<video>
  <source type="video/mp4" src="http://miodominio/miofile.mp4">
</video>

Descrizione metodo per inserimento Video Youtube

sz-youtube: Tramite l’utilizzo di questo codice potete inserire nel vostro post la visualizzazione di un video presente nel portale Youtube, basta specificare l’indirizzo del video ed eventualmente le dimensioni di larghezza ed altezza. Se non vengono specificate le dimensioni verranno usate quelle di default presenti nel pannello di amministrazione che potete impostare in base alla dimensione standard del vostro tema legata alla visualizzazione del post. Viene gestito anche il responsive design.

Vi riporto qui di seguito un esempio di shortcode da utilizzare, in ogni caso sappiate che viene messo a disposizione tramite l’editor standard WordPress un’icona per eseguire questa funzione automaticamente con la presentazione di una finestra pop up e i parametri permessi.

[sz-youtube url="url" width="opzionale" height="opzionale"/]

Nel valore URL potete specificare sia il formato classico con youtube.com che il formato short che viene generato dalla funzione di condivisione nativa in youtube e quindi youtu.be:

[sz-youtube url="http://youtu.be/1vJHTa1_Oys"/]
[sz-youtube url="http://www.youtube.com/watch?v=W-YjbLscx14"/]

Descrizione metodo per inserimento Video Vimeo

sz-vimeo: Il funzionamento di questo shortcode è identico a quello usato per Youtube, tutti i parametri di configurazione e di personalizzazione sono gli stessi, quindi basta inserire il video tramite la stringa URL corrispondente e il gioco è fatto. L’unica differenza di elaborazione riguarda la gestione della cover image e solo se si vuole utilizzare il metodo per non caricare il codice embed immediatamente ma in differita dopo un’eventuale clic. (method=”n”).

Infatti mentre per Youtube la cover image è una risorsa statica facilmente trovabile con un link auto generato, con Vimeo la questione è un pò più complicata, infatti bisogna fare una richiesta al server web chiamando una API apposita, la quale ritorna un file di informazioni che ci dice anche la destinazione della cover image per il video da visualizzare. In poche parole vi consiglio di non inserire troppi video sulla stessa pagina che utilizzano questa tecnica, altrimenti i tempi di caricamento sarebbero poco performanti, meglio utilizzare un’immagine personalizzata.

[sz-vimeo url="url" width="opzionale" height="opzionale"/]

Come per il player di Youtube anche per quello di Vimeo è possibile gestire la dimensione con la tecnica Responsive, la quale adatterà le dimensioni del nostro video (contenuto in un iframe) alla dimensione della pagina web in base al tipo di device che effettuerà la richiesta.

[sz-vimeo url="url" responsive="Y"/]

Descrizione metodo per inserimento Video DailyMotion

sz-dailymotion: Questo shortcode può essere utilizzato per l’inserimento di video dal portale di DailyMotion, la sintassi e il metodo di utilizzo è identico agli altri shortcode come quello di Youtube e Vimeo. E’ possibile specificare dei parametri di default che riguardano il player di DailyMotion direttamente nel pannello di amministrazione, in alternativa possiamo specificare i parametri direttamente sullo shortcode. Possiamo caricare il codice embed in differita e utilizzare il responsive design.

Per inserire lo shortcode interessato dovete procedere come per gli altri:

[sz-dailymotion url="url" width="opzionale"/]

Se vogliamo inserire il video nel nostro post senza specificare una dimensione esatta ma fare in modo che il player si adatti automaticamente alla dimensione del contenitore con la tecnica del Responsive Design, dobbiamo specificare il parametro responsive=”y”.

[sz-dailymotion url="url" responsive="Y"/]

Per l’elenco dei parametri da poter utilizzare basta vedere la documentazione dello shortcode utilizzato per Youtube in quanto le opzioni e le caratteristiche sono le medesime, altrimenti vedere la pagina dedicata alla Configurazione del plugin SZ-Video for WordPress.

ELENCO PARAMETRI E CONFIGURAZIONE DEI SHORTCODES

Indirizzo URL url = “stringa” Specificare indirizzo URL del video
Metodo di embed method = “Y”,”N” Caricare subito il codice embed
Copertina video cover = “URL” Indirizzo immagine o “default”
Responsive responsive = “Y”,”N” Dimensioni o Responsive
Larghezza width = “numero” Valore in px per larghezza
Altezza height = “numero” Valore in px per altezza
Rapporto aspetto ratio = “numero” Valore ratio tra 0.000 e 1.000
Margine alto margintop = “numero” Valore del margine alto
Margine destro marginright = “numero” Valore del margine destro
Margine basso marginbottom = “numero” Valore del margine basso
Margine sinistro marginleft = “numero” Valore del margine sinistro
Unità di misura units = “px”,”em” Unità di misura
Schema.org schemaorg = “Y”,”N” Tag per SEO snippets video
Titolo title = “stringa” Titolo per tag schema.org
Descrizione description = “stringa” Descrizione per tag schema.org
Durata duration = “secondi” Durata per tag schema.org
Avvio automatico autoplay = “Y”,”N” Avvio video automaticamente
Ripetizione loop = “Y”,”N” Ripetizione video in loop
Parametri userdata = “stringa” Parametri aggiuntivi per URL
Didascalia caption = “stringa” Testo da scrivere sotto il video

Shortcode user friendly – Inserimento facilitato

Se non vi piace dover inserire i shortcode manualmente nei vostri post potete usare la versione semplificata tramite finestra popup che potete attivare con gli appositi pulsanti  presenti nell’editor standard di wordpress. Vi allego immagine di esempio:

Come potete vedere dall’immagine ci sono tre icone, una per l’inserimento di video Youtube, l’altra per video locali e l’ultima per lo streaming tramite CDN come Amazon CloudFront. Per inserire un video tramite questa funzione posizionate il cursore nel punto desiderato alla visualizzazione del vostro video e selezionate l’icona adatta alla vostra specifica esigenza.

Una volta selezionata l’icona della funzione interessata vi verrà presentata una finestra popup per inserire i parametri del vostro video, in questo esempio dovete inserire il campo URL del video Youtube nell’apposito campo e se volete potrete anche specificare i parametri di dimensione come larghezza ed altezza del video o i margini che devono esseri impostati per la spaziatura intorno alla cornice del contenitore principale. Se non viene specificato nessun valore aggiuntivo, verranno impostati per il video da visualizzare i valori che sono stati specificati nel pannello admin nei valori di default. Una volta inseriti tutti i parametri che vi interessano premete il tasto Inserisci,  in questa maniera verrà inserito automaticamente nel post lo shortcode con tutti i parametri specificati.

SZ Video popup

Autore:
Massimo Della Rovere
Articoli:
140
Website:
http://startbyzero.com/
Nato a Roma nel 1968, appassionato di informatica, programmatore e sistemista su IBM iSeries, esperto in procedure web con PHP e MySQL, grande utilizzatore dei prodotti Google, Linux, Wordpress ed Amazon AWS. Attualmente vive in Perù nella città di Lima, da dove porta avanti il suo progetto favorito riguardante il blog multitematico di startbyzero.com. Per contattarlo basta seguirlo sul profilo pubblico presente nel social network di google+.

Scrivi un tuo commento o qualche consiglio