Kursinnehåll
Ultimate HTML
Ultimate HTML
Bädda in Ljud och Video för Rikt Medieinnehåll
Ljudinbäddning
Du kan använda <audio>
-elementet för att inkludera ljudfiler på en webbsida. Låt oss överväga ett exempel:
index.html
I det här exemplet:
<audio>
-elementet innehåller ett<source>
-element, som specificerar URL och filtyp för ljudfilen. Vanligtvis stödda format är MP3 och OGG;controls
-attributet visar standarduppspelningskontroller som spela, pausa och volym;Om användarens webbläsare inte stöder ljudelementet visas ett reservmeddelande.
Ytterligare attribut som vanligtvis används med HTML-ljudelementet inkluderar:
autoplay
: börjar spela ljudfilen så snart sidan laddas;loop
: gör att ljudfilen spelas om kontinuerligt;muted
: stänger av ljudet som standard;volume
: anger standardvolymnivån för ljudfilen, från 0.0 (tyst) till 1.0 (full volym).
Här är ett exempel som demonstrerar användningen av alla dessa attribut:
index.html
Video Inbäddning
Du kan bädda in videofiler på en webbsida med hjälp av <video>
-elementet. Tänk på följande exempel:
index.html
I detta exempel:
<video>
-elementet innehåller ett<source>
-element, som specificerar URL och filtyp för videofilen. Vanligtvis stödda format är WebM, MP4 och OGG;controls
-attributet visar standarduppspelningskontroller;Om användarens webbläsare inte stöder videoelementet visas ett reservmeddelande.
Vanligt använda attribut för HTML-videoelementet inkluderar:
autoplay
: startar uppspelning av videofilen så snart sidan laddas;loop
: gör att videofilen loopar kontinuerligt;muted
: stänger av ljudet som standard;volume
: anger standardvolymnivån för ljudfilen, från 0.0 (tyst) till 1.0 (full volym);poster
: anger URL:en till en bild som visas som videominiatyr innan videon spelas;width
ochheight
: anger bredd och höjd på videospelaren i pixlar.
Här är ett exempel som demonstrerar användningen av alla dessa attribut:
index.html
Notera
Dessutom finns det många JavaScript-bibliotek och API:er tillgängliga som ger ytterligare funktionalitet för att spela och manipulera videoinnehåll på webben.
Tack för dina kommentarer!