Il tag <video>

Per inserire un video in una pagina web basta inserire il suo URL nel tag <source> contenuto nel tag <video>. Al momento alcuni browser supportano il formato MP4 e altri il formato WebM, quindi è necessario includere il video in almeno questi due formati.

Per fare apparire i tasti play e pausa dobbiamo inserire l'attributo controls nel tag <video> mentre con l'attributo autoplay faremo partire automaticamente la riproduzione e con loop la faremo ripetere a ciclo continuo. L'attributo muted farà partire il video senza audio. Altri attributi sono poster, che definisce un'immagine di copertina del video e preload che definisce in che modo deve essere precaricato il video.

E' buona norma inserire un link per il download del video per i browser non compatibili.

Il tag <iframe>

Se vogliamo includere un video di YouTube non dobbiamo usare <video> ma il tag <iframe>. Infatti quando copiamo il codice da incorporare che Youtube ci fornisce notiamo che si tratta dei un tag HTML con degli attributi: width o height per definire la larghezza o altezza del video, src per definire l'URL, frameborder per definire la grandezza del bordo, allowfullscreen per definire se deve essere concessa la possibilità di allargare il video a tutto schermo.

Il tag <audio>

Per inserire un file audio in una pagina web basta inserire il suo URL nel tag <source> contenuto nel tag <audio>. Al momento alcuni browser supportano il formato MP3, altri il formato OGG, altri WAV o AAC o MP4, quindi è necessario includere il video almeno nei due formati più supportati: MP3 e OGG.

Per fare apparire i tasti play e pausa dobbiamo inserire l'attributo controls nel tag <audio> mentre con l'attributo autoplay faremo partire automaticamente la riproduzione e con loop la faremo ripetere a ciclo continuo. L'attributo muted azzera l'audio, quindi non sarà possibile l'ascolto del file. Un altro attributo è preload che definisce in che modo deve essere precaricato l'audio.

E' buona norma inserire un link per il download del video per i browser non compatibili.

<video controls height="150">
    <source src="https://www.appunti-digitali.it/sites/default/files/video.mp4" type="video/mp4">
    </source>
    <source src="https://www.appunti-digitali.it/sites/default/files/video.webm" type="video/webm">
    </source>
    <p>Il tuo browser non supporta il tag video, clicca <a
            href="https://www.appunti-digitali.it/sites/default/files/video.mp4">qui</a> per eseguire il download.</p>
</video>

<iframe height="150" src="https://www.youtube.com/embed/WeuBOe4H5IY" frameborder="0" allowfullscreen></iframe>

<audio controls>
    <source src="https://www.appunti-digitali.it/sites/default/files/MeAndYou.mp3" type="audio/mp3">
    </source>
    <source src="https://www.appunti-digitali.it/sites/default/files/MeAndYou.ogg" type="audio/ogg">
    </source>
    <p>Il tuo browser non supporta il tag audio, clicca <a
            href="https://www.appunti-digitali.it/sites/default/files/MeAndYou.mp3">qui</a> per eseguire il download.</p>
</audio>
/* no css */
// no js