Come aggiungere file audio o file video in un post di Blogger con il linguaggio HTML5.

Come mostrare un player HTML5 per riprodurre file audio e video in un blog dopoaverli caricati su Google Sites o Google Drive.

Cerchiamo di illustrare in modo più analitico il significato del titolo che per ovvie ragioni deve essere stringato. Quando si vuole inserire un video in un articolo di Blogger o di qualsiasi altra piattaforma si carica su Youtube quindi si apre il player , si va su Condividi, si copia il codice e si incolla nella pagina web in cui si vuole mostrare. 

Questo lo si può fare anche per i file audio. Basta creare un video che abbia una immagine fissa e inserirvi l'audio che invece vogliamo condividere. Il video anche in questo caso andrebbe caricato su Youtube o in un altro sito di video sharing per poi ottenerne il codice. Alternativamente si può usare un sito di audio sharing come Audioo.com che funziona più o meno come Youtube ma che ci permette di caricare i nostri audio per poi condividerli nel nostro sito. Dopo la registrazione a Audioo.com e aver caricato il file audio 

si va sulla icona Embed e si copia il codice da incollare nel nostro sito. In questo articolo vedremo invece come si possano inserire file audio e file video a beneficio dei lettori che potranno riprodurli senza dipendere da servizi esterni come Youtube o Audioo.com. 

COME CREARE UN FILE AUDIO O UN FILE VIDEO

Non sto a illustrare come si possa creare un video ma rimando all'articolo sui migliori Editor video ma mi soffermerò solo su come registrare un audio con un nostro messaggio vocale tramite Audacity. Tale programma gratuito può essere scaricato dalla Pagina di Download di Audacity. Dovremo anche scaricare il plugin MP3 Lame per poter utilizzare questo formato. Si fa doppio click del file .exe del plugin per procedere con la sua installazione. 

Per registrare con il microfono da Audacity si clicca sulla icona rossa circolare mentre per terminare si va sulla icona quadrata. Verrà visualizzato il grafico o spettro del file audio

Andando sulla icona del Play si può riprodurre la sua Anteprima. Per il salvataggio si va su File > Esporta, si sceglie la cartella di destinazione e si dà un nome al file

 

CONVERTIRE FILE AUDIO E VIDEO IN FORMATI COMPATIBILI CON HTML5

Per inserire i file audio e video nella pagina utilizzeremo il linguaggio HTML5 che non supporta tutti i formati. Per i file audio non ci sono molti problemi visto che anche il classico MP3 può andar bene. Se così non fosse per il vostro browser  il file audio va convertito in OGG.

Per la conversione si utilizza il programma iWisoft Free Video Converter che può essere scaricato gratuitamente dalla Pagina di Download di iWisoft. 

CONVERTIRE FILE AUDIO IN OGG

Si va su Add, si seleziona il file quindi su Profile si sceglie Common Audio > OGG e si va su Start

 

CONVERTIRE FILE VIDEO IN H.264

Tra i codec video supportati da HTML5 quello con la maggiore qualità  è H.264. Anche per questa conversione si può usare iWisoft Free Video Converter. Si clicca su Add e si seleziona il file video da convertire. Su Profile si sceglie Common Video > H.264/MPEG-4 (*.mp4)

Successivamente si va su Start per salvare il video con il codec H.264.

CARICARE I FILE SU GOOGLE DRIVE E AVERNE IL LINK DIRETTO

Se i file audio e video volete inserirli in un blog gratuito del tipo Blogspot allora potete caricare i vostri file su Google Sites creando una nuova pagina in Modalità Schedario. Se invece avete un dominio personalizzato allora dovrete usare Google Drive per caricare i file e ottenerne il link diretto. I passaggi da compiere sono i seguenti:

1. Creare una cartella e darle un nome qualsiasi
2. Cliccandoci sopra con il destro del mouse si va su Condividi e si imposta come Pubblica sul web
3. Si apre tale cartella quindi si va su Nuovo > Caricamento di file

Si selezionano i file da caricare e si aspetta la fine del processo. Nella barra del browser si copia l'ID della cartella che è la stringa alfanumerica dopo folders/

Si crea un URL come il seguente 

https://googledrive.com/host/ID_CARTELLA

dove al posto di ID_CARTELLA si incolla l'ID appena ricavato. Tale indirizzo si incolla nel browser e si va su Invio. Si aprirà una pagina web con tutti i file presenti nella nostra cartella

Per ottenere il link diretto dei file in oggetto bisogna cliccarci sopra con il destro del mouse e scegliere Copia indirizzo link o voce analoga a seconda del browser utilizzato. Tale URL va incollato in un file di testo ed è appunto l'hotlink al file video o audio che abbiamo caricato su Google Drive. L'URL del file audio terminerà in .ogg (o in .mp3) mentre quello del file video terminerà in .mp4.

INSTALLARE I PLAYER AUDIO E VIDEO CON HTML5

Per mostrare un player audio che riproduca il nostro file dovremo incollare in modalità HTML o in un widget HTML/Javascript un codice come questo

<audio controls> <source src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/audio-prova.ogg" /> Se non riesci a vedere il player significa che il tuo browser non supporta il tag audio </audio>

che mostrerà un player in grado di riprodurre il file audio caricato su Google Drive.

Ovviamente al posto dell'URL colorato di rosso dovrete mettere l'indirizzo del vostro file.

Demo
Clicca qui

Se si vuole invece mostrare un player video il codice da usare sarà come il seguente

<video controls=" " preload="auto" src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/video-prova.mp4" width="400"> Se non riesci a vedere il player significa che il tuo browser non supporta il tag video </video></div>

Con il tag <video> si può settare la larghezza del player in funzione delle dimensioni del filmato. Questi tag possono essere utili quando si voglia condividere un messaggio audio con i lettori oppure quando si voglia mostrare un video che per una qualche ragione non vogliamo pubblicare su Youtube.

Aggiornamento importante: Google Drive non funziona più come hosting quindi i file MP3 vanno caricati su DropBox, Google Sites o sempre su Google Drive con il link di download.