Pubblicare audio e video nel web con i tag HTML5

Come caricare audio e video su Dropbox, ottenerne il link di download e creare player audio e video con HTML5 per pubblicare audio e video sul web

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 lo stesso Youtube, per esempio inserendo l'audio insieme a una immagine fissa. Ci sono anche servizi di audio-sharing come Clyp che permettono gratuitamente il caricamento fino a 6 ore di audio per un massimo di 25MB.

I Termini e le Condizioni che regolano il caricamento di contenuti su Youtube o su siti analoghi sono piuttosto rigidi. Per esempio non possono essere caricati audio commerciali o video che anche solo minimamente possono essere adatti a un pubblico adulto.

In questo articolo vedremo come risolvere il problema, caricando i nostri contenuti online in un servizio di hosting, con regole molto meno rigide, per poi pubblicarli in un sito, in un blog o in una pagina web utilizzando i tag HTML5 <audio> e <video> insieme ad alcuni attributi per personalizzarne i relativi player.

INDICE

1. Registrarsi e caricare i file su Dropbox
2. Video tutorial
3. Ottenere i link di condivisione
4. Convertire i link di condivisione in link di download
5. Codice per il player audio HTML5
6. Codice per il player video HTML5
7. Attributi aggiuntivi al codice HTML5.

I codici ottenuti potranno poi essere incollati su Blogger, su Wordpress o in una singola pagina web.

1) REGISTRARSI A DROPBOX

Dropbox è un servizio conosciutissimo che permette di avere 2GB di spazio gratuito nel cloud per caricarvi file di ogni genere, che poi potranno essere condivisi, e i cui link di condivisione possono poi essere convertiti in link di download. Si può creare un account gratuitamente andando sul relativo link, oppure accedere con le credenziali di Google. Dopo l'accesso, si scarica l'applicazione desktop di Dropbox per poi installarla.

Si tratta di fare un doppio click sul file DropboxInstaller.exe che viene scaricato quando si clicca sull'apposito link. Dopo questa operazione, i file e le cartelle presenti nel nostro account Dropbox, e che sono quindi caricate nel web, saranno visibili anche in Esplora File. Potremo quindi caricare file semplicemente spostandoli in una cartella di Dropbox senza dover aprire il browser. Dropbox si può collegare anche a dispositivi mobili con la relativa app per Android e per iOS in modo da avere i file sincronizzati e disponibili da desktop e da mobile.

2) VIDEO TUTORIAL

Ho pubblicato sul mio Canale Youtube il video tutorial di tutta la procedura per caricare i file su Dropbox, per ottenerne il link di download e per creare il codice necessario per postarli in una pagina web.

Consiglio di seguire le istruzioni del video anche se le informazioni testuali seguenti saranno piuttosto dettagliate.

3) OTTENERE I LINK DI CONDIVISIONE SU DROPBOX

Come detto si possono ottenere i link di condivisione dei file caricati su Dropbox direttamente dal browser oppure agendo con il destro del mouse sul file in oggetto in Esplora File del computer.

Nel seguito farò riferimento a come farlo con il browser. Si apre la pagina del nostro Dropbox e si accede. Si va sulla destra e si clicca su Nuova Cartella. Verrà aperto un modulo in cui digitare il nome della cartella. Si lascia l'opzione Solo tu e si va su Crea. Verrà automaticamente creata tale cartella e verrà aperta. Sarà ovviamente vuota.

Adesso si va su Carica File sempre nella colonna di destra. Si seleziona il file o i file da caricare per poi andare su Apri. Detti file verranno caricati e mostrati nella cartella.

Per ottenerne il link di condivisione si clicca sul pulsante Condividi che si trova a destra del nome del file.

Ricordo en passant che è opportuno caricare i file audio in formato MP3 e i file video in formato MP4, perché ho testato che con questi formati i tag HTML5 funzionano mentre non l'ho fatto con altri formati.

Andando su Condividi, verrà aperto un popup in cui andare su Crea link. Successivamente si clicca su Copia link. Il link di condivisione verrà copiato negli appunti e potrà essere incollato in un file di testo con Ctrl+V.  Ecco un esempio di due file caricati su Dropbox e della struttura degli URL

https://www.dropbox.com/s/m31q3ay8rjtvlck/Matt_DeHarp_-_Sunshine_Blues.mp3?dl=0

https://www.dropbox.com/s/yvqz58e9arr04rm/Video%20sottotitolato.mp4?dl=0

La prima parte è il dominio del sito, la seconda è l'ID del contenuto e la terza è il nome del file. La quarta parte rappresenta l'estensione dello stesso file, ovvero il formato (.mp3 o .mp4). Infine la parte finale è formata dalla stringa ?dl=0 che è aggiunta alla fine di tutti i link di condivisione di Dropbox.

4) CONVERTIRE I LINK DI CONDIVISIONE IN LINK DI DOWNLOAD

Per poter creare il player HTML5 occorre convertire i link di condivisione in link di download. Un link è di download se viene scaricato il file quando l'URL è incollato nel browser e se poi si digita Invio nella tastiera.

Per farlo basterà modificare solo la parte finale degli URL e sostituire dl=0 con dl=1 cioè in definitiva mettere 1 al posto di 0. I link di condivisione precedenti diventano quindi link di download se vengono così modificati.

https://www.dropbox.com/s/m31q3ay8rjtvlck/Matt_DeHarp_-_Sunshine_Blues.mp3?dl=1

https://www.dropbox.com/s/yvqz58e9arr04rm/Video%20sottotitolato.mp4?dl=1

5) COME CREARE UN PLAYER AUDIO HTML5

Il codice generico da usare per un player audio HTML5 è il seguente

<audio controls> <source src="URL DOWNLOAD FILE MP3" /> </audio>

dove al posto di URL DOWNLOAD FILE MP3 si incolla l'URL di download fornitoci da Dropbox. Nel mio test diventa quindi in questo modo

<audio controls> <source src="https://www.dropbox.com/s/m31q3ay8rjtvlck/Matt_DeHarp_-_Sunshine_Blues.mp3?dl=1" /> </audio>

e, se si incolla in una pagina web, in un sito o in un blog in modalità HTML, produce questo risultato.

Per visualizzare il player audio ho utilizzato un Editor HTML online che mostra il rendering di un codice nella parte bassa della pagina quando se ne incolla il codice in alto.

6) COME CREARE UN PLAYER VIDEO HTML5

Il codice generico per un player video HTML5 è il seguente:

<video controls="" preload="auto" src="URL DOWNLOAD FILE MP4" width="700" height="394"> </video>

che nel mio test diventa così

<video controls="" preload="auto" src="https://www.dropbox.com/s/yvqz58e9arr04rm/Video%20sottotitolato.mp4?dl=1" width="700" height="394"> </video>

Nel player del video, oltre a incollare l'URL diretto del file, si possono settare le dimensioni di altezza e larghezza. Per non avere spazi vuoti occorre mantenere l'aspect ratio del video caricato (16:9 o 4:3).

Il risultato sarà simile a questo

Il player del video, come quello dell'audio, ha il pulsante del Play per la riproduzione che poi diventa quello classico per mettere in pausa. Si può regolare in entrambi i casi il volume dell'audio. Cliccando sul menù dei tre puntini, presente in entrambi i player si può scaricare il file riprodotto con il player.

Qualsiasi lettore che apre la pagina potrà quindi scaricare i file. Vediamo come eventualmente impedirlo.

7) COME PERSONALIZZARE IL PLAYER

a) CENTRARE - I player audio e video possono essere personalizzati. Per esempio si possono centrare incollando prima del codice del player questa prima riga di codice <div align="center"> per poi aggiungere il tag </div> alla fine dello stesso codice. Al posto di center si può mettere left o right con ovvio significato.

b) NO DOWNLOAD - Per impedire il download del file si aggiunge l'attributo controlsList="nodownload" dopo controls nel player audio e dopo <video nel player video.  

c) AUTOPLAY - Si può fare in modo che il video o l'audio si riproducano automaticamente, senza cliccare sul Play, aggiungendo l'attributo autoplay subito dopo <audio nel primo player e dopo <video nel secondo player.

d) RIPRODURRE ALL'INFINITO - Per far riprodurre video e audio all'infinito si aggiunge l'attributo loop dopo <audio o dopo <video . Si può usare insieme all'attributo autoplay.

e) NASCONDERE PLAYER AUDIO - Se si vuole riprodurre una musica di sottofondo in una pagina web, senza che il lettore possa intervenire, si aggiunge prima del codice audio questa riga

<div style="visibility:hidden;">

per poi inserire </div> alla fine del codice del player.