# HTML: come inserire video in un sito web

A partire da HTML5, esiste un elemento nativo che consente di incorporare video come contenuti web a tutti gli effetti. In alternativa, hai la possibilità di rivolgerti a fornitori come YouTube o Vimeo. Ti mostriamo come funziona

## HTML5: inserire video facilmente

Incorporare un video con HTML5 diventa un gioco da ragazzi: tutto quello che ti serve è l’elemento nativo `video`, che si lascia ampliare da attributi opzionali. Il seguente esempio ti mostra come **inserire un video nel codice sorgente del tuo sito web**:

```html
<video src="esempio.mp4" width="320" "height"=240 controls poster="immaginedianteprima.jpg">
    <p>Il video non può essere riprodotto sul tuo browser.<br>
    Fai partire il download del video cliccando su questo<a href="URL">link</a>.</p>
</video>
```

Nell’esempio l’elemento `video` contiene l’**URL al contenuto visuale** (`src="esempio.mp4"`) e gli **attributi opzionali** `width`, `height`, `controls` e `poster`, che definiscono come il video si presenta sul sito web. Il testo, che sta tra il tag di apertura e quello di chiusura dell’elemento `video`, appare solo quando un browser non può visualizzare il video. Di regola, chi gestisce un sito web usa questa funzione per offrire una descrizione alternativa e un link che permette di scaricare il video.

### Attributi opzionali dell’elemento video in HTML5

Se si inserisce una risorsa attraverso l’elemento `video`, questo deve contenere il link al contenuto visuale, inserito tramite l’attributo `src` o con un tag `source`. Inoltre, si può specificare ulteriormente l’elemento `video` con i seguenti attributi:

<table>
  <thead>
    <tr>
      <th>Attributo</th>
      <th>Funzione</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`width`/`height`</td>
      <td>Gli attributi `width` e `height` ti permettono di specificare in maniera esplicita le dimensioni del tuo video. Se manca questo attributo, il tag `video` si serve delle informazioni contenute nel file video. Se usi solo uno dei due attributi, il browser adatta automaticamente il video alla pagina.</td>
    </tr>
    <tr>
      <td>`controls`</td>
      <td>Con l’attributo `controls` attivi il controllo nativo del browser. In alternativa, puoi definire delle funzioni di controllo con JavaScript.</td>
    </tr>
    <tr>
      <td>`poster`</td>
      <td>Grazie all’attributo `poster` rimandi a un file grafico, che dovrebbe essere mostrato come anteprima per il video. Se manca questa specifica, il primo frame del video viene usato per l’anteprima.</td>
    </tr>
    <tr>
      <td>`autoplay`</td>
      <td>Con `autoplay` ordini al browser di far partire automaticamente il video all’apertura del sito web.</td>
    </tr>
    <tr>
      <td>`loop`</td>
      <td>Se usi l’attributo `loop`, il video viene riprodotto continuamente, in un ciclo infinito.</td>
    </tr>
    <tr>
      <td>`muted`</td>
      <td>Con l’attributo `muted` metti l’audio del video su muto.</td>
    </tr>
    <tr>
      <td>`preload`</td>
      <td>L’attributo `preload` suggerisce al browser come caricare un video. Per questo sono disponibili tre valori: quello standard `auto` (nel quale normalmente si carica tutto il video), `metadata` (in cui il browser carica solo i metadati) e `none` (che blocca il caricamento automatico dei dati del video)</td>
    </tr>
  </tbody>
</table>

N.B. Fornisci tramite collegamenti testuali all’interno dell’elemento `video` **file di download separati** per il video, per incorporare video in HTML e rendere questi contenuti video accessibili anche agli utenti che utilizzano versioni molto vecchie dei browser.

### Supporto dei codec in HTML5

L’elemento `video` definisce la specifica in HTML5 e l’[interfaccia di programmazione (API)](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/che-cose-unapi/), ma **non dà alcuna indicazione per la codifica video**. La scelta del formato del video è dunque un problema per i gestori di siti web, visto che ognuno dei formati più usati, come [WebM](https://www.ionos.it/digitalguide/siti-web/creare-siti/webm/), Ogg Theora o H.264, ha vantaggi e svantaggi. Fino a oggi, non esiste uno standard comune per tutti i browser. La tabella seguente riepiloga il supporto dei codec video nei principali browser:

<table>
  <thead>
    <tr>
      <th>Browser</th>
      <th>H.264 (AVC)</th>
      <th>H.265 (HEVC)</th>
      <th>AV1</th>
      <th>VP9</th>
      <th>Ogg Theora</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Edge</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td></td>
      <td></td>
      <td>\*</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Chrome</td>
      <td></td>
      <td>\*</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Safari</td>
      <td></td>
      <td></td>
      <td></td>
      <td>\*</td>
      <td></td>
    </tr>
    <tr>
      <td>Opera</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

\*solo parzialmente

Per **evitare incompatibilità**, si consiglia quindi di mettere a disposizione diversi formati, se vorresti inserire un video nel tuo sito. L’elemento `video` permette a questo scopo di incorporare diverse risorse video attraverso il tag `source` e di specificarlo per il browser con l’attributo `type`.

```html
<video width="320" height="240" controls poster="anteprima.jpg">
    <source src="esempio-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="esempio-vp9.webm" type="video/webm; codecs=vp9">
    <source src="esempio.mp4" type="video/mp4; codecs=avc1.42E01E">
    Il tuo browser non supporta il tag video.
</video>
```

Se il tag alternativo `source` è stato inserito con attributo `type` nell’elemento `video`, il browser sceglie automaticamente all’apertura del sito web il formato video preferito. Da notare che l’elemento `video` non può contenere, in questo tipo di inserimento video, alcun attributo `src` con risorse differenti.

## Inserire un video nel sito attraverso una piattaforma video

Chi non mette a disposizione i video tramite HTML, ma vorrebbe approfittare dell’[hosting video](https://www.ionos.it/digitalguide/online-marketing/vendere-online/hosting-video/) di un servizio esterno, ha la possibilità di caricare video gratuitamente su piattaforme come YouTube o Vimeo e di integrare le clip nel proprio sito web grazie a un **codice da incorporare (codice embed)**.

Dato che le piattaforme video preferite garantiscono che i tuoi contenuti siano compatibili con i browser più comuni, i formati di questi servizi vengono supportati dalla maggior parte dei dispositivi. Inoltre, l’[outsourcing](https://www.ionos.it/digitalguide/startup/gestione/outsourcing/) dei video ha il vantaggio di non sovraccaricare ulteriormente il proprio server con lo streaming. Ci si dovrebbe informare prima sulle **condizioni d’uso** della piattaforma di hosting video e adattare il codice da incorporare in maniera appropriata alle proprie esigenze.

Ad esempio, se desideri incorporare un video da YouTube, apri la clip in questione sulla piattaforma ed estrai il codice da incorporare dal menu. Qui sono a disposizione anche impostazioni centrali per definire le dimensioni del video, controllare le statistiche e attivare il titolo del video. Per impedire che i contenuti esterni appaiano sul proprio sito web, si consiglia inoltre di disattivare la funzione anteprima di video alternativi. Altrimenti, la piattaforma video presenta anche i contenuti di altri utenti nel player che hai incorporato, che hanno associato parole chiave simili e, nel caso peggiore, si tratta di video dei tuoi diretti concorrenti.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/creare-siti/come-inserire-video-in-un-sito-tramite-html/](https://www.ionos.it/digitalguide/siti-web/creare-siti/come-inserire-video-in-un-sito-tramite-html/) for AI/LLM consumption.