Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Bädda in Ljud och Video för Rikt Medieinnehåll | Arbeta med Media och Tabeller
Ultimate HTML
course content

Kursinnehåll

Ultimate HTML

Ultimate HTML

1. Förstå Webbutveckling
2. HTML-Taggar och Attribut
3. HTML-Dokumentstruktur
4. Arbeta med Media och Tabeller
5. HTML-Formulär och Användarinmatning

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

html

index.html

copy

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:

html

index.html

copy

Video Inbäddning

Du kan bädda in videofiler på en webbsida med hjälp av <video>-elementet. Tänk på följande exempel:

html

index.html

copy

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 och height: anger bredd och höjd på videospelaren i pixlar.

Här är ett exempel som demonstrerar användningen av alla dessa attribut:

html

index.html

copy

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.

question mark

Vilket av följande påståenden om <audio> och <video>-elementen i HTML är sant?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 5

Fråga AI

expand
ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

course content

Kursinnehåll

Ultimate HTML

Ultimate HTML

1. Förstå Webbutveckling
2. HTML-Taggar och Attribut
3. HTML-Dokumentstruktur
4. Arbeta med Media och Tabeller
5. HTML-Formulär och Användarinmatning

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

html

index.html

copy

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:

html

index.html

copy

Video Inbäddning

Du kan bädda in videofiler på en webbsida med hjälp av <video>-elementet. Tänk på följande exempel:

html

index.html

copy

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 och height: anger bredd och höjd på videospelaren i pixlar.

Här är ett exempel som demonstrerar användningen av alla dessa attribut:

html

index.html

copy

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.

question mark

Vilket av följande påståenden om <audio> och <video>-elementen i HTML är sant?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 5
Vi beklagar att något gick fel. Vad hände?
some-alt