Sviluppo Web

Aggiungere html5 video al tuo sito utilizzando i campi personalizzati

html5 video

Quello che stiamo per proporvi è un mini-tutorial per agevolare l’aggiunta di html5 video anche da parte di utenti WordPress non esperti. Ci riferiamo in particolare ai clienti che molto spesso si trovano nella necessità di dover aggiornare i contenuti e non sanno come fare. Specie se si tratta di contenuti multimediali.

In questi casi è opportuno rendere loro la vita più semplice, impostando la funzionalità di caricamento video all’interno delle pagine desiderate del sito web. Come fare? Quello che vi proponiamo è un metodo abbastanza semplice ma che richiede comunque una certa conoscenza dell’ecosistema WordPress.

Tre formati html5 video e una poster image

html5 videoMa andiamo con ordine. I campi personalizzati sono una risorsa WordPress poco conosciuta e utilizzata ma che in realtà può essere di grande aiuto, come in questo caso. Prima di iniziare servono tre cose fondamentali: primo, installare il plugin Advanced Custom Fields; secondo, avere a disposizione almeno tre formati diversi del video che si desidera pubblicare in modo da “coprire” la visualizzazione sul maggior numero di browser possibili; terzo, creare una poster image ad alta risoluzione del video in questione. Predisposto tutto quanto, si può procedere. Go!

Sperimenta questo metodo semplice e veloce

Per aggiungere html5 video al vostro sito, per prima cosa occorre creare i campi personalizzati utilizzando il plugin installato. È molto semplice: cliccando su “add new” si aprirà un nuovo set di custom fields. Qui andrete ad aggiungere 4 campi, uno per ogni file da caricare (le tre versioni del video più la poster image), impostando il “tipo file”. Quindi più in basso selezionate la location, ovvero indicate in quale pagina devono apparire i campi. A questo punto navigate verso la pagina interessata e caricate i file video e immagine.

Per ultimo andrete ad aggiungere la seguente scritta di codice nel file del template riferito al tipo di pagina in cui volete aggiungere il video:

// Build the Shortcode
$attr = array(
‘mp4’ => $video_mp4,
‘webm’ => $video_webm,
‘flv’ => $video_flv,
‘poster’ => $video_poster,
‘preload’ => ‘auto’
);

// Display the Shortcode
echo wp_video_shortcode( $attr );
?>

L’uso dei campi personalizzati per l’aggiunta di html5 video rende molto agevole la gestione e la pubblicazione di contenuti audiovisivi su WordPress. Vi invitiamo pertandto ad approfondire l’argomento e a cimentarvi con il metodo che vi abbiamo qui descritto.

Buona sperimentazione!

Ti potrebbero interessare