Pubblicato il 05/08/13 - aggiornato il  | 10 commenti :

Come inserire player audio e video HTML5 in un blog.

Come inserire un filmato o un file audio in una pagina web utilizzando i tag
HTML5 è tutto un insieme di nuove tecnologie che non è qui il caso di enumerare e che si estrinsecano in un nuovo linguaggio di markup. Mi limito a fare solo degli esempi. Visto che gli sviluppatori si riferiscono spesso a posizioni del layout quali header o footer ecco che sono stati introdotti proprio questi tag anche per dare un valore semantico a queste sezioni delle pagine web. Il linguaggio HTML5 è anche legato al CSS3 e a nuovi standard di cui ho già parlato come i microdati e i microformati.

Una parte importante dell'HTML5 la riveste soprattutto la multimedialità con l'utilizzo dei nuovi tag <audio> e <video> per l'inserimento di filmati e di file audio senza utilizzo di plugin esterni quali Flash di Adobe o Silverlight di Microsoft.

I browser di ultimissima generazione supportano tutti gran parte dei tag HTML5. Se avete dei dubbi in proposito potete sempre recarvi nella pagina HTML5 Test per controllare i tag e le funzionalità supportate. Ci sarà anche un punteggio che andrà fino a un massimo di 500 punti. La cosa più importante però è quella di capire quali parti dell'HTML5 sono rilevate. Se avete Firefox e Chrome aggiornati avrete pochi problemi nel visualizzare pagine web che utilizzano questo nuovo linguaggio.

Da qualche tempo anche Youtube supporta l'HTML5 e se non usate IE vi consiglio di andare nella pagina HTML5 di Youtube per attivare la versione di prova di HTML5. I video si vedranno meglio e il PC consumerà meno risorse. Nel caso non fosse così si può sempre disattivare andando su Esci.

Fatto tutto questo spero non inutile preambolo vediamo come si possano usare i tag <audio> e <video> per installare player audio e video senza bisogno di plugin ma solo con una riga di codice.

player-audio-video

Saranno visibili anche i controlli per il volume, per lo scorrimento della riproduzione e per lo schermo intero riguardo al player video. Si possono usare formati video e audio di diversi tipi ma per non appesantire troppo il post mi limito ai formati MOV per i video e MP3 per l'audio. Per convertire un video in MOV potete usare il programma gratuito Format Factory.

DOVE CARICARE I FILE AUDIO E I FILMATI

Se avete un blog gratuito del tipo mioblog.blogspot.com potete caricare i file MP3 e MOV direttamente nel vostro account Google Sites. Se invece avete un dominio personalizzato allora dovrete usare un altro hosting che offre i link diretti come la cartella Public di DropBox. Dopo aver caricato i file è appunto necessario ottenerne l'hotlink per poi inserirlo nel codice.

CODICE AUDIO PLAYER HTML5

Il codice per inserire un player audio è il seguente

<audio controls=" " preload="auto" src="URL_Brano.mp3"></audio>

Il tag preload="auto" serve per bufferizzare l'audio prima della riproduzione. Al posto di auto si può mettere none per non farlo affatto o metadata per farlo solo con i metadati. Si possono inserire anche altri attributi quali autoplay e loop rispettivamente per riprodurre automaticamente e per ricominciare da capo la riproduzione senza soluzione di continuità.

Si può anche aggiungere una riga per avvertire gli utenti di browser che non supportano HTML5

<audio controls=" " preload="auto" src="URL_Brano.mp3" autoplay loop>
Il tuo browser non supporta l'elemento <code>audio</code>.
</audio>

CODICE VIDEO PLAYER HTML5

Il codice per inserire un player video HTML5 è molto simile al precedente

<video controls=" " preload="auto" src="URL_VIDEO.mov" width="400"></video>

dove si può anche inserire la larghezza del player. Anche in questo caso sono supportati i tag autoplay e loop. Ho postato come mio solito una demo in un blog di prova



Il player audio sarà subito funzionante mentre quello video avrà bisogno di alcuni secondi di caricamento. Da notare che per il player video esiste anche la funzione a tutto schermo.


10 commenti :

  1. ciao ernesto,conosci un plug in per trasformare il blog in un ecommerce? ovviamente per la piattaforma blogger

    RispondiElimina
    Risposte
    1. Prova questo
      http://www.ideepercomputeredinternet.com/2011/08/shopping-cart-e-un-modello-di-blogger.html
      o questo
      http://www.ideepercomputeredinternet.com/2012/03/blogger-store-un-modello-di-blogger-per.html
      Sono dei modelli completi anche con un sistema di pagamento integrato
      @#

      Elimina
  2. sto cercando di mettere un audio mp3 nel mio blog, sto utilizzando blogger ma non c'è verso, ho provato leggere e fare quello che scrivi ma compare solo la "radio " ma non parte e non si sente l audio, però se carico url sulla pagina google mi fa ascoltare l audio che ho salvato su Dropbox.. mi riesci ad aiutare? grazie

    RispondiElimina
  3. Incollami l'URL dell'audio che hai caricato su Dropbox e ti posterò il codice
    @#

    RispondiElimina
  4. Ciao, ho un sito jimdo con dominio proprio. Vorrei inserire un video, un semplice montaggio con musichetta di sottofondo in mp4 ma non c'è verso di fargli riconoscere il codice nella sezione dedicata all'inserimento di widget/html (visualizzo il video resto nero e non parte), la cosa strana è che se faccio la prova creando una pagina html esterna con il medesimo codice funziona tutto correttamente. Sono convinta che l'errore è nell'src che inserisco direttamente nel sito.
    Sto impazzendo >.<

    RispondiElimina
    Risposte
    1. Puoi avere più informazioni leggendo questo post che è molto più recente di questo
      https://www.ideepercomputeredinternet.com/2019/04/html5-audio-video-tag-player-dropbox.html
      Come servizio di cloud per il video ti consiglio Dropbox in cui è molto semplice trovare il link di download
      @#

      Elimina
  5. Ho già provato ma non ho bisogno del download.
    Incorporando il link non viene mostrato il video nella sua forma classica.
    Vorrei avere un semplicissimo video nella mia paginetta, nulla più.
    Non capisco perché il codice ma non viene "interpretato" dalla piattaforma nonostante sia perfetto, è molto frustrante.
    Grazie comunque.

    RispondiElimina
  6. Ho provato con la tua scrittura usando il link di dropbox e visualizzo sempre e solo lo schermo tutto nero, senza vita. Quale limite potrebbe avere la piattaforma? Se lo sapessi potrei modificare la scrittura di base ma non so cosa modificare.

    RispondiElimina

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