HTML
Mediaelement
Sök…
parametrar
| Attribut | detaljer |
|---|---|
| bredd | Ställer in elementets bredd i pixlar. |
| höjd | Ställer in elementets höjd i pixlar. |
<source> | Definierar resurser för ljud- eller videofilerna |
| Spår | Definierar textspåret för medieelement |
| kontroller | Visar kontroller |
| autospela | Börja spela media automatiskt |
| slinga | Spelar media i en upprepad cykel |
| dämpad | Spelar media utan ljud |
| affisch | Tilldelar en bild som ska visas tills en video laddas |
Anmärkningar
Support i webbläsare
| Funktion | Krom | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Grundläggande stöd | 3,0 | 3,5 (1,9,1) | 9,0 | 10,50 | 3,1 |
<audio> : PCM i WAVE | (Ja) | 3,5 (1,9,1) | Inget stöd | 10,50 | 3,1 |
<audio> : Vorbis i WebM | (Ja) | 4,0 (2,0) | Inget stöd | 10,60 | 3,1 |
<audio> : Streaming Vorbis / Opus i WebM via MSE | ? | 36,0 | ? | ? | ? |
<audio> : Vorbis i Ogg | (Ja) | 3,5 (1,9,1) | Inget stöd | 10,50 | Inget stöd |
<audio> : MP3 | (Ja) | (Ja) | 9,0 | (Ja) | 3,1 |
<audio> : MP3 i MP4 | ? | ? | ? | ? | (Ja) |
<audio> : AAC i MP4 | (Ja) | (Ja) | 9,0 | (Ja) | 3,1 |
<audio> : Opus i Ogg | 27,0 | 15,0 (15,0) | ? | ? | ? |
<video> : VP8 och Vorbis i WebM | 6,0 | 4,0 (2,0) | 9,0 | 10,60 | 3,1 |
<video> : VP9 och Opus i WebM | 29,0 | 28,0 (28,0) | ? | (Ja) | ? |
<video> : Streaming WebM via MSE | ? | 42,0 (42,0) | ? | ? | ? |
<video> : Theora och Vorbis i Ogg | (Ja) | 3,5 (1,9,1) | Inget stöd | 10,50 | Inget stöd |
<video> : H.264 och MP3 i MP4 | (Ja) | (Ja) | 9,0 | (Ja) | (Ja) |
<video> : H.264 och AAC i MP4 | (Ja) | (Ja) | 9,0 | (Ja) | 3,1 |
| alla andra format | Inget stöd | Inget stöd | Inget stöd | Inget stöd | 3,1 |
Med hjälp av `
Använd HTML- eller <audio> -elementet för att bädda in video- / ljudinnehåll i ett dokument. Video / ljudelementet innehåller en eller flera video / ljudkällor. Om du vill ange en källa använder du antingen src-attributet eller <source> -elementet; webbläsaren väljer den mest lämpliga.
Exempel på ljudtagg:
<!-- 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>
Exempel på ljudtagg:
<!-- 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 ger en ny standard för inbäddning av en ljudfil på en webbsida.
Du kan bädda in en ljudfil till en sida med <audio> -elementet:
<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video
Du kan också bädda in en video till en webbsida med hjälp av elementet <video> :
<video width="500" height="700" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Videohuvud eller bakgrund
Lägga till en video som spelas automatiskt i en slinga och har inga kontroller eller ljud. Perfekt för en videohuvud eller bakgrund.
<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>
Denna CSS ger en fallback om videon inte kan laddas. Observera att det rekommenderas att använda den första ramen i videon som poster video.jpg.
#videobg {
background: url(video.jpg) no-repeat;
background-size: cover;
}
Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow