Zoeken…


parameters

Attribuut Details
breedte Stelt de breedte van het element in pixels in.
hoogte Stelt de hoogte van het element in pixels in.
<source> Definieert bronnen van de audio- of videobestanden
bijhouden Definieert het tekstspoor voor media-elementen
controls Geeft bedieningselementen weer
automatisch afspelen Begin automatisch met het afspelen van de media
lus Speelt het medium af in een herhaalde cyclus
gedempt Speelt de media af zonder geluid
poster Wijst een afbeelding toe om weer te geven totdat een video is geladen

Opmerkingen

Ondersteuning in browsers

Voorzien zijn van Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basis ondersteuning 3.0 3.5 (1.9.1) 9.0 10.50 3.1
<audio> : PCM in WAVE (Ja) 3.5 (1.9.1) Geen steun 10.50 3.1
<audio> : Vorbis in WebM (Ja) 4.0 (2.0) Geen steun 10.60 3.1
<audio> : Streaming Vorbis / Opus in WebM via MSE ? 36.0 ? ? ?
<audio> : Vorbis in Ogg (Ja) 3.5 (1.9.1) Geen steun 10.50 Geen steun
<audio> : MP3 (Ja) (Ja) 9.0 (Ja) 3.1
<audio> : MP3 in MP4 ? ? ? ? (Ja)
<audio> : AAC in MP4 (Ja) (Ja) 9.0 (Ja) 3.1
<audio> : Opus in Ogg 27.0 15.0 (15.0) ? ? ?
<video> : VP8 en Vorbis in WebM 6.0 4.0 (2.0) 9.0 10.60 3.1
<video> : VP9 en Opus in WebM 29.0 28.0 (28.0) ? (Ja) ?
<video> : WebM streamen via MSE ? 42.0 (42.0) ? ? ?
<video> : Theora en Vorbis in Ogg (Ja) 3.5 (1.9.1) Geen steun 10.50 Geen steun
<video> : H.264 en MP3 in MP4 (Ja) (Ja) 9.0 (Ja) (Ja)
<video> : H.264 en AAC in MP4 (Ja) (Ja) 9.0 (Ja) 3.1
elk ander formaat Geen steun Geen steun Geen steun Geen steun 3.1

`Gebruiken

Gebruik het HTML- of <audio> -element om video / audio-inhoud in een document in te sluiten. Het video / audio-element bevat een of meer video / audiobronnen. Gebruik een src-kenmerk of het element <source> om een bron op te geven; de browser kiest de meest geschikte.

Voorbeeld van audiotag:

<!-- 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>

Voorbeeld van audiotag:

<!-- 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 biedt een nieuwe standaard voor het insluiten van een audiobestand op een webpagina.

U kunt een audiobestand op een pagina insluiten met het element <audio> :

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

Video

U kunt ook een video in een webpagina insluiten met het element <video> :

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

Videokoptekst of achtergrond

Een video toevoegen die automatisch wordt afgespeeld tijdens een lus en geen bedieningselementen of geluid heeft. Perfect voor een videokoptekst of achtergrond.

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

Deze CSS biedt een fallback als de video niet kan worden geladen. Merk op dat het wordt aanbevolen om het eerste frame van de video te gebruiken als de poster video.jpg.

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


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow