Inserire un video in un sito con HTML 5

Francesco PC Academy di - 19 aprile 2013 in Web Design

Con l’avvento di HTML 5 per inserire un video possiamo fare a meno di Flash o di caricarlo prima su piattaforme come You Tube o Vimeo per poi condividerlo. E’ stato infatti creato il tag <video> attraverso il quale è possibile inserire video senza supporti esterni.

IL TAG.

Il tag è molto semplicemente questo:

<video src="test.mp4" controls="controls">

</video>

Con “controls” si vogliono inserire i tasti di controllo automatici, infatti i browsers leggono in automatico il codice generando i pulsanti con loro plugin interni.

Schermata 2013-04-19 a 10.08.18

Sarebbe troppo facile però se bastasse inserire questo tag per risolvere il tutto. Dobbiamo infatti affrontare alcune problematiche riguardanti la compatibilità con i browser.

QUALI BROWSER SUPPORTANO HTML 5:

Schermata 2013-04-19 a 10.10.39

QUALI FORMATI UTILIZZARE.

Non tutti i browsers si avvalgono dello stesso formato video, infatti anche qui bisogna fare una suddivisione. Ad esempio iPad e Microsoft vogliono il formato .mp4.Per accontentare tutti inseriremo a cascata diversi formati in modo tale da accontentare tutti o quasi, è importante mettere al primo posto il formato .mp4 perché Apple lo richiede.

<video controls="controls">
	<source src="video/test.mp4" type="video/mp4" />
	<source src="video/test.webm" type="video/webm" />
	<source src="video/test.ogg" type="video/ogg" />
	il tuo browser non supporta HTML5
</video>
Corso Video Editing

CON QUESTA TABELLA POTETE VEDERE IL PERCHE’ DELLA SCELTA DI QUESTI FORMATI RISPETTO AD ALTRI COME .VLC PER ESEMPIO

Schermata 2013-04-19 a 10.18.30

 

QUALE PLAYER UTILIZZARE

Tra i 9 player inclusi in html 5 vi parlo di quelli che secondo me funzionano meglio e utilizzo abitualmente:

Il primo in assoluto è VIDEO JS

QUI TROVATE UN ESEMPIO

Si appoggia a un file javascript e uno css, non richiede framework ed è molto semplice da installare.

Il secondo invece, che si avvale di un unico codice html 5 è VIDEO FOR EVERYBODY

QUI TROVATE UN ESEMPIO

 

CONVERTITORE AUTOMATICO HTML 5

Esistono, per chi non vuole proprio saperne di cimentarsi nei passaggi mostrati in precedenza, dei convertitori gratuiti scaricabili in pochi minuti sul web e che funzionano perfettamente. Vi segnalo questo:

EASYHTML5VIDEO

Schermata 2013-04-19 a 10.26.08

Guarda anche: i migliori Corsi di Web Design

Share

Promozioni

Potrebbe interessarti



Francesco PC Academy
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.

Commenti

  • Federico

    Ciao Francesco, una domanda, è necessario includere un player? Incide sulla compatibilità oppure serve solo a personalizzare i comandi?

    Grazie in anticipo.

    • Francesco PC Academy

      Ciao Federico, personalmente ritengo utile inserirlo per render più semplice a tutti gli utenti la visualizzazione.
      Incide sulla compatibilità ma se usi js vai sul sicuro!

  • serena

    Suggerisco l’uso di Freemake Video Converter, programma gratuito che consente di convertire un file video in svariati formati, anche contemporaneamente i formati .mp4 , .webm e .ogg. Quando si utilizza questa funzione, il programma genera anche una pagina web che mostra l’anteprima del video, consigliando il codice html da inserire nel proprio editor.
    Ciao a tutti!

  • Vibien Design

    Sera a tutti!
    Qualcuno sa se jimdo ha problemi con la lettura dell’ html5? Ho fatto 1000 test creando pagine web esterne con ogni browser e va tutto benissimo, il codice che uso è giusto. In sostanza accade questo: caricato il codice esce fuori il video con le misure e i pulsantini che gli comando ma non partono i contenuti. File provato in qualsiasi estensione. Sto impazzendo aiutatemi se sapete qualcosa!
    p.s.Ho fatto anche il test con le scritture di Francesco (grazie per l’articolo) e fa lo stesso difetto, ovvero grafica ok ma niente contenuto.