Elementi Multimediali

Parametri

Attributo Dettagli
larghezza Imposta la larghezza dell'elemento in pixel.
altezza Imposta l'altezza dell'elemento in pixel.
<source> Definisce le risorse dei file audio o video
traccia Definisce la traccia del testo per gli elementi multimediali
controlli Visualizza i controlli
riproduzione automatica Avvia automaticamente la riproduzione del file multimediale
ciclo continuo Riproduce i media in un ciclo ripetuto
smorzato Riproduce i media senza audio
manifesto Assegna un'immagine da visualizzare fino a quando non viene caricato un video

Osservazioni

Supporto nei browser

caratteristica Cromo Firefox (Gecko) Internet Explorer musica lirica Safari
Supporto di base 3.0 3.5 (1.9.1) 9.0 10.50 3.1
<audio> : PCM in WAVE (Sì) 3.5 (1.9.1) Nessun supporto 10.50 3.1
<audio> : Vorbis in WebM (Sì) 4.0 (2.0) Nessun supporto 10.60 3.1
<audio> : Streaming Vorbis / Opus in WebM tramite MSE ? 36.0 ? ? ?
<audio> : Vorbis in Ogg (Sì) 3.5 (1.9.1) Nessun supporto 10.50 Nessun supporto
<audio> : MP3 (Sì) (Sì) 9.0 (Sì) 3.1
<audio> : MP3 in MP4 ? ? ? ? (Sì)
<audio> : AAC in MP4 (Sì) (Sì) 9.0 (Sì) 3.1
<audio> : Opus in Ogg 27,0 15.0 (15.0) ? ? ?
<video> : VP8 e Vorbis in WebM 6.0 4.0 (2.0) 9.0 10.60 3.1
<video> : VP9 e Opus in WebM 29,0 28.0 (28.0) ? (Sì) ?
<video> : Streaming WebM tramite MSE ? 42.0 (42.0) ? ? ?
<video> : Theora e Vorbis in Ogg (Sì) 3.5 (1.9.1) Nessun supporto 10.50 Nessun supporto
<video> : H.264 e MP3 in MP4 (Sì) (Sì) 9.0 (Sì) (Sì)
<video> : H.264 e AAC in MP4 (Sì) (Sì) 9.0 (Sì) 3.1
qualsiasi altro formato Nessun supporto Nessun supporto Nessun supporto Nessun supporto 3.1

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;
}

- Salva la pagina ?



♣ © All Rights Reserved - www.isolajava.com ♣