Pubblicato il 09/07/15e aggiornato il

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 

audioo-com

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

registrare-audacity

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

salvare-file-audio

 

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-audio-ogg

 

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)

convertire-video-h264

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
caricare-file-google-drive

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/

id-cartella-google-drive

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

file-cartella-pubblica

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.


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.    




14 commenti :

  1. Ciao e grazie per l'impegno ma purtroppo non mi funziona, vedi qui http://jollyclubpattinaggio.blogspot.it/p/pattinaggio-corsa.html
    Ciao e grazie lo stesso.

    RispondiElimina
    Risposte
    1. Ci credo che non ti funziona :)
      Hai messo questo link diretto al file MP3
      https://drive.google.com/open?id=0B3aagMtK-NG1OFRlOTZaOFRGd0U
      che non è quello giusto. Non hai seguito bene le istruzioni per avere il link diretto da Google Drive. Se hai difficoltà con Google Drive prova a caricarlo su DropBox e averne il link diretto
      http://www.ideepercomputeredinternet.com/2016/02/dropbox-hotlink.html
      o meglio ancora visto che il tuo blog à gratuito puoi usare Google Sites
      http://www.ideepercomputeredinternet.com/2013/03/google-sites-hotlink.html
      e vedrai che funzionerà :)
      @#

      Elimina
  2. E se volessi inserire un file audio che parta in automatico in un determinato post, senza che siano visualizzati dei Player? E' possibile?

    Grazie in anticipo

    RispondiElimina
    Risposte
    1. Per nascondere il player basta mettere width="0", per l'autoplay seguimi i prossimi giorni
      @#

      Elimina
    2. Ottimo, grazie. Anche per la risposta veloce ;)

      Elimina
  3. Ciao, ho seguito la procedura e riesco a visualizzare e ascoltare sia da pc che da smartphone:-) Però mi hanno detto che da mac e iphone non si riesce a sentire purtroppo! Puoi aiutarmi? Grazie in anticipo!

    RispondiElimina
    Risposte
    1. Il problema è del Mac e degli altri dispositivi iOS. Hanno bisogno di player specifici per HTML5
      @#

      Elimina
    2. Grazie della risposta così veloce e della guida per la procedura :-)

      Elimina
  4. Ciao Ernesto, che tu sappia è possibile inserire un video in un widget di blogger (anziché in un post o pagina)? Grazie!

    RispondiElimina
    Risposte
    1. Certo. Copi il codice di Youtube scegliendo una larghezza compatibile con quella della sidebar quindi vai su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e ce lo incolli
      @#

      Elimina
    2. Ah ok, quindi tocca passare comunque per youtube... bene, grazie mille!

      Elimina
    3. Puoi passare anche da Vimeo o da altro servizio. Il caricamento di video su Blogger esisteva agli inizi quando Youtube non era stato ancora acquistato da Google. Adesso credo sia stato disabilitato. Tra l'altro non si vedeva neppure la miniatura e quasi nessuno lo usava
      @#

      Elimina
  5. ciao non sono proprio bravissima al pc, totalmente autodidatta e non proprio giovanissima mi aiuteresti il link per il file audio dove va incollato su blog? io ho fatto un prova ma vedo la stringa nel post e basta. grazie

    RispondiElimina
    Risposte
    1. Hai ragione. Il post è vecchio e Google Drive non funziona più come hosting. Il procedimento è lo stesso ma il file lo devi caricare su Google Sites o su Dropbox per poi avere il link diretto da inserire nel codice. Su Dropbox segui questo post
      http://www.ideepercomputeredinternet.com/2016/10/hotlink-dropbox.html
      Su Google Sites segui questo post
      http://www.ideepercomputeredinternet.com/2013/03/google-sites-hotlink.html
      Puoi anche usare sempre Google Drive ma invece del link diretto utilizzare il link di download
      http://www.ideepercomputeredinternet.com/2014/01/google-drive-download-link.html
      Il codice poi lo incolli in un post in Modalità HTML cliccando sul bottone accanto a Scrivi oppure in un widget andando su Layout > Aggiungi un gadget > HTML/Javascript
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.