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