Pubblicato il 04/01/18 - aggiornato il  | Nessun commento :

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.

dropbox

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

copia link dropbox

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

player audio

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:

player video

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.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy