HTML
Media-elementen
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