Supporto volontario e collaborativo per Joomla!® in italiano

Inserire video ed audio in HTML5 negli articoli di Joomla

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
HTML5
Grazie alla nuova versione dell'editor TinyMCE presente in Joomla 3 possiamo inserire facilmente video ed audio nei contenuti di Joomla senza ricorrere all'aiuto di estensioni esterne ma sfruttando HTML5. E' solo necessario caricare i file sul server del nostro sito ed indicare la posizione, i moderni browser faranno il resto...


Oramai è appurato che l'utilizzo di player con tecnologia Flash è una tecnica abbandonata, il plugin Flash per i vari browser non è più molto affidabile e non presente su molti dispositivi mobile.
Quindi per pubblicare in modo semplice e veloce dei contributi audio in un articolo di Joomla carichiamo il file .mp3 in una relativa cartella sul server via FTP, ad esempio:
images/audio/band.mp3

Inseriamo il cursore nel punto del testo dove vogliamo inserire il "blocco" audio e premiamo il tasto "Inserisci/Modifica Video" presente nell'editor TinyMCE. Nella finestra che si apre indichiamo nel parametro URL il percorso dove abbiamo caricato il nostro file audio e diamo ok.


Salviamo il contenuto e visualizzeremo sul sito il player che il browser ci mette a disposizione:



E' il browser che supporta HTML5 ed attiva i comandi per controllare e riprodurre l'audio o il video. Ogni browser ha il proprio player e questi sono differenti fra loro. Provate a visualizzare questo articolo con Chrome o con Firefox per notare le differenze fra i vari player dei browser. Oramai il supporto per queste caratteristiche di HTML5 è pienamente diffuso nei più comuni browser, sia su PC che su dispositivi mobile.

La stessa operazione la possiamo effettuare con un file video, ad esempio con estensione .mp4 oppure .ogv  ed anche .webm.
Carichiamo il file via FTP nella relativa cartella ed apriamo ancora la finestra per l'inserimento video. Indichiamo il percorso ed ecco come si presenta:



Se conosciamo esattamente le dimensioni "larghezza" ed "altezza" in pixel del filmato andiamo ad inserire questi valori nel relativo parametro, oppure decidiamo le dimensioni in base alla larghezza a disposizione nell'area dedicata ai contenuti facendo attenzione a mantenere le proporzioni (possiamo inizialmente anche evitare di indicare le dimensioni).
Inserendo le misure di "larghezza" ed "altezza" il blocco del video non sarà però "responsive". Quindi su siti con template responsive e per video con dimensioni superiori a 320px di larghezza è consigliato inserire nel campo dedicato alla larghezza il valore 100% e nel campo altezza quello desiderato per proporzionare la visualizzazione nella dimensione standard dello spazio a disposizione nel contenuto che ospita il video. Nell'esempio di questo articolo il video ha come larghezza 100% ed altezza 350.

E' possibile indicare, dall'apposito parametro, anche una immagine (gif o jpg) da utilizzare come Anteprima.
Se vogliamo tornare a modificare delle impostazioni di un oggetto multimediale precedentemente inserito possiamo selezionarlo ed aprire dall'apposito tasto "Inserisci/Modifica Video" la finestra con tutte le opzioni.

Vi invito ad usare questa soluzione per file di dimensioni, durata e risoluzione non troppo grandi. Non potete trasformare il server web del vostro sito in un server di streaming :)

In caso di un utilizzo più "spinto", dove quindi si vanno a mettere a disposizione video di grandi dimensioni, ed il sito in questione raggiunge molte visite è preferibile utilizzare servizi esterni per ospitare i video. Successivamente è possibile "incorporare" ogni filmato nella pagina del sito, sempre attraverso questa funzione dell'editor.
Utilizzando ad esempio Youtube si può facilmente copiare il codice necessario per "incorporare" il video direttamente dalla pagina di visualizzazione dello stesso.


Selezionata la dimensione desiderata si copia il codice.

Prima di incollare il codice nell'articolo di Joomla assicuriamoci che nel plugin "Editor - TinyMCE" il parametro "Usa filtro di testo di Joomla" sia impostato su SI.

Nella modifica del contenuto di Joomla torniamo ad aprire la finestra "Inserisci/Modifica Video" e selezioniamo il TAB "Incorporare" dove incolliamo il codice precedentemente copiato su Youtube.



La visualizzazione del blocco video è anche in questo caso completamente "responsive". I vantaggi di questa soluzione integrata con Youtube sono una fruizione migliore per l'utente che visita il sito. Se carichiamo il video su Youtube in alta risoluzione all'utente sarà fornito il flusso video più indicato sulla base della qualità della sua connessione ecc.. così da bilanciare il più possibile il funzionamento ed evitare interruzioni. Però appariranno dei banner pubblicitari...

 

CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.7.0 Stabile Italiana
Data di rilascio: 25 Aprile 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: