Aggiungere video in html

Esistono diversi modi per inserire un video nel tuo sito web. I tag <embed>, <frame> e <object> venivano utilizzati per inserire video in un documento HTML. Ma ora sono deprecati, quindi diamo un'occhiata per capire come utilizzare i tag <video> e <iframe>.

Utilizzare il tag <video> per l'inserimento di video in HTML

Il tag <video> viene aggiunto in HTML5 insieme al tag <audio>. Prima del rilascio di HTML5, un video poteva essere riprodotto solo in un browser con un plug-in (come un flash). L'elemento HTML5 <video> specifica un modo standard per incorporare un video in una pagina Web. Vale a dire che il video viene identificato aggiungendo un URL video a un attributo di origine. Si può usare per incorporare video importati dal computer o ospitati da un sito web esterno.

Per l'uso di base, tutto ciò che dobbiamo fare in un documento HTML è aggiungi l'URL del video all'elemento utilizzando l'elemento <source> per identificare l'URL del video e per aggiungere l'attributo controls in modo che i visitatori del sito web possano controllare le opzioni video. È anche importante utilizzare gli attributi di larghezza e altezza per impostare le dimensioni del video. Vediamo un semplice esempio.

Esempio di inserimento di un video in HTML:

Risultato

Come minimo, per utilizzare l'elemento <video>, è necessario utilizzare i seguenti attributi:

• src, che definisce l'URL in cui è ospitato il contenuto video,
• type, che definisce il formato del file,
• controlli, che devono essere specificati o non verrà visualizzato alcun elemento visivo per controllare la riproduzione del contenuto.

Inoltre, ci sono diversi attributi opzionali che possono essere utilizzati per influenzare il modo in cui vengono caricati i contenuti video. Questi attributi includono:

• autoplay, che Specifica che la riproduzione del video inizierà non appena sarà pronta,
• Loop, che specifica che il video ricomincerà da capo ogni volta che è terminato,
• Poster, che seleziona un'immagine da visualizzare come poster per il video fino all'inizio della riproduzione,
• Preload, che indica come l'autore pensa che il video debba essere caricato quando la pagina viene caricata.

Un altro punto critico da ricordare è che tutti i browser moderni supportano l'elemento <video>.

Attualmente, il tag HTML5 <video> supporta 3 tipi di file video:

Come impostare la riproduzione automatica

del video Per impostare la riproduzione automatica del video è sufficiente aggiungere l'attributo autoplay per il tag <video> in questo modo:

Imposta i controlli di riproduzione automatica nel caso in cui desideri abilitare l'opzione "controlli" per il video a riproduzione automatica.

Esempio di impostazione della riproduzione automatica del video:

Inserisci video da Youtube utilizzando il tag <iframe>

Il modo più semplice per riprodurre video in HTML è utilizzare YouTube come fonte. Innanzitutto, devi caricare il video su YouTube o copiare il codice di incorporamento di un video esistente, che verrà inserito nell'elemento <iframe> nella tua pagina web.

Per avere il link di incorporamento del video di YouTube, segui questi semplici passaggi:

1. Apri il video su YouTube e fai clic sul pulsante di condivisione.
2. Apri il codice di incorporamento.
3. Copia il link sorgente.

Mentre copi il link di incorporamento, puoi inserirlo nel tuo documento HTML come src del tuo elemento <iframe>. Inoltre, definisci la larghezza e l'altezza del tuo video. Ora, vediamo come sarà.

Esempio di inserimento di un video da Youtube utilizzando il tag <iframe>: