Elementi Multimediali

Usando `

Usa l'elemento HTML o <audio> per incorporare il contenuto video / audio in un documento. L'elemento video / audio contiene una o più sorgenti video / audio. Per specificare una fonte, utilizzare l'attributo src o l'elemento <source> ; il browser sceglierà quello più adatto.

Esempio di tag audio:

<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!-- Simple video example -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>

Esempio di tag audio:

<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>

Audio

HTML5 fornisce un nuovo standard per l'incorporamento di un file audio su una pagina web.

Puoi incorporare un file audio in una pagina utilizzando l'elemento <audio> :

<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

video

Puoi incorporare anche un video in una pagina web utilizzando l'elemento <video> :

<video width="500" height="700" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Intestazione o sfondo del video

Aggiunta di un video che riproduce automaticamente su un loop e non ha controlli o suoni. Perfetto per un'intestazione o uno sfondo video.

<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>

Questo CSS fornisce un fallback se il video non può essere caricato. Nota che è consigliato utilizzare il primo frame del video come poster video.jpg.

#videobg {
background: url(video.jpg) no-repeat;
background-size: cover;
}