Come implementare file audio e video in un blog con Dropbox

Come incorporare in una pagina web o in un sito un audio o un video precedentemente caricati su Dropbox e di cui si sia ricavato il link di download.

Per arricchire i contenuti di una pagina web solitamente si aggiungono immagini e qualche volta anche video o file audio. L'inserimento delle immagini non presenta problemi, e anche quello dei video, visto che si possono usare i codici ottenuti dai siti di video-sharing come Youtube e Vimeo.

Anche gli audio possono essere inseriti in questo modo usando servizi di audio-sharing come Clyp che permette gratuitamente il caricamento fino a 6 ore di audio per un massimo di 25MB.

In precedenti articoli abbiamo visto come incorporare un video e un audio con Google Drive. Le norme per il caricamento di file su Google Drive sono meno rigide di quelle su Youtube ma comunque sono piuttosto restrittive. Per evitare problemi di questo genere, o soltanto per usare altro spazio nel cloud, si possono caricare i file su Dropbox per poi incorporarli in un sito o in una pagina web.

Ci si può iscrivere gratuitamente a Dropbox e installare una applicazione desktop per avere la possibilità di caricare i file direttamente da Esplora File (OS Windows). Vediamo come procedere per visualizzare un player audio e un player video in una pagina web con cui riprodurre l'audio e il video caricati su Dropbox.

CARICARE I FILE SU DROPBOX

Come detto i file possono essere caricati via browser o anche direttamente dal computer copiando o spostando il file in oggetto in una cartella di Dropbox. Per poter utilizzare i tag HTML5 è opportuno scegliere il formato MP3 per gli audio e MP4 per i video. Dal browser si clicca su Carica file dopo aver scelto la cartella.

Per trovare il link di download dei file caricati si clicca su Condividi quindi su Crea link.

Si clicca poi su Copia link per copiare l'indirizzo del file negli Appunti. Da computer si apre la cartella Dropbox quindi si clicca con il destro del mouse sul file in oggetto e si va su Condividi nel menù contestuale. Si aprirà una finestra simile a quella che si apre nel browser in cui andare prima su Crea link e poi su Copia link.

I link dei file audio termineranno con nomefile.mp3?dl=0 mentre i file video con nomefile.mp4?dl=0. Per modificare i link condivisi in link di download basterà modificare la stringa finale dl=0 in dl=1.

COME IMPLEMETARE UN FILE AUDIO IN UN SITO

Dopo aver trovato il link di download si crea un codice come il seguente

<div align="center">
<audio controls> <source src="https://www.dropbox.com/s/IdFile/nomefile.mp3?dl=1" /> </audio>
</div>

dove al posto dell'URL colorato di viola va incollato quello ricavato da Dropbox. Lo si incolla in una pagina web

in modalità HTML. Il risultato sarà quello mostrato nello screenshot precedente con l'icona del play, il cursore per regolare il volume e la durata dell'audio. Verrà mostrata anche l'icona di download per scaricare il file riprodotto. Se si vuole impedire al navigatore di scaricare detto file occorre aggiungere questa stringa controlsList="nodownload" subito dopo audio controls.

COME IMPLEMETARE UN FILE VIDEO IN UN BLOG

Per incorporare un file video si utilizza lo stesso sistema già visto per ottenere il link da Dropbox e si converte in link di download sostituendo la stringa finale dl=0 con dl=1.

Si crea quindi un codice con questa struttura di base

<div align="center">
<video controls="" preload="auto" src="https://www.dropbox.com/s/IdFile/nomefile.mp4?dl=1" width="640" height="480"> </video></div>

dove al posto dell'URL colorato di viola va inserito quello ricavato da Dropbox. Vanno settate le dimensioni del player in funzione di quella che è la risoluzione del video. Il risultato sarà come il seguente:

Verrà mostrata l'anteprima del video sopra al player HTML5 che è molto simile a quello per i file audio. Oltre al bottone del Play, alla durata del video e al cursore per regolare il volume è presente anche l'icona per il download del file video. Se si vuole impedire ai lettori di scaricare il video basterà aggiungere la stringa controlsList="nodownload"  dopo quella video controls="". 

Se si tolgono le dimensioni del video, quest'ultimo occuperà tutto il layout. Si può aggiungere solo la dimensione della larghezza e l'altezza sarà una conseguenza del mantenimento delle proporzioni. Infine è possibile usare anche le percentuali. P.e con un tag width="80%" il video prenderà l'ottanta per cento della larghezza del layout.