NemProgrammering.dk logo
nordicway webhotel

HTML5 video og audio tags

HTML5 kursus | Lær at anvende HTML5
WordPress hjemmeside hjælp

Information om denne video

Underviser: Joakim Børlum Petersen, www.Snowhat.dk

I denne danske video vejledning om HTML5 viser vi hvordan du bruger aduio og video tags i HTML5. Vi vil blandet andet komme ind omkring controls, loop, poster og autoplay atributterne. Video-tag'et er fuldkomment harmløst og kan bedst beskrives som et img-tag til levende billeder. Enhver kan tilføje video til sin side ved at indsætte video-tag'et, uploade filen til en webserver og indtaste den rigtige sti i tag'ets source-attribut. Så nemt er det altså med HTML5 at få sat en video ind på sin hjemmeside.

Det samme gælder i store træk for audio tagget. Her er det dog kun lyden som vil blive spillet på din side. Generelt set, så er HTML5 video og audio tagget det rette skrid mod fremtiden, da det muliggøre et alternativ til det problematiske FLASH.

Herunder finder du koderne der bliver lavet i videoen - Kopier dem gerne!

Video tags:

Denne video relaterer til emner såsom: HTML5 kursus, HTML5 guide, Gratis HTML5 undervisning, HTML5 video tutorials på dansk, HTML5 video, HTML5 audio

Her har du kildekoden

            
<!DOCTYPE html>

<html>

<head>

    <title>Video-testing med HTML5</title>

</head>

<body>

    <video controls loop poster="SnowhatBackground.png" width="200px">

        <source src="HTML5Video1.mp4">

        <source src="HTML5Video1.avi">

        <source src="HTML5Video1.ogg">

        <p>Din browser understøtter ikke video-tagget. Ærgeligt</p>

        

    </video>

</body>

</html>

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Kim Neesgaard    24-05-2020

Hej! I lektion 3 viser du, hvordan man indsætter video. Dette kan jeg ikke få til at virke i Visual Studio 2019 - den brokker sig over 'source'?? Venlig hilsen Kim Neesgaard

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Helge    28-12-2015

Hej. Hvornår er det man bruger et lukningstag? Hvorfor er det f.eks. lukningstag i linjen med videoen og ikke i linjen med lyd i denne video? Jeg kan godt se, det ikke gør den store forskel i dette tilfælde, men spørger blot for at forstå logikken bag? :-)

kommentar på NemProgrammering.dk - lav din egen hjemmeside
elli    20-09-2015

Hej, Jeg har mere 2 spørgsmål end kommentar til det overstående video. Jeg er en nystartet bruger af HTML5, jeg har downloaded programmet Netbeans. Det jeg ikke kan finde ud af det er hvorledes jeg får plottet mit arbejde i programmet til min hjemmeside. Derudover vil jeg gerne høre om det muligt at bruge en lydoptagelse jeg har lavet på min bærbar som en audio fil?

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Joakim    02-11-2014

Hej Thomas Har prøvet med dit forslag, men det virker desværre stadig ikke. Mvh. Joakim

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    07-10-2014

Hej Joakim, Smid en div omkring din video og centrer den via margin-left: auto og margin-right: auto . Du burde også kunne få float til at begynde på denne måde Mvh.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Joakim    07-10-2014

Hej.. Er der en måde man kan flytte videoen på?? Jeg har prøvet alle de ting jeg kender margin: position: float: Videoen vil bare ikke flytte sig ind i midten! Mvh. Joakim

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    28-02-2014

Hej Martin, Husker du at se videoen i HD og køre fuld skærm? Mvh. Thomas

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Martin    28-02-2014

Hej...alle videoerne der er lavet i netbeans har været rigtig gode, overskuelig og teksten har stået helt skarp, mens i dette program er det rigtig svært at se hvad det er der sker!.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Nicolai    11-02-2014

Fantastisk video.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    22-12-2013

Hej Frank, Hvis du kører fuld skærm, og husk at sætte billedkvaliteten til 720p (HD), så burde det ikke være så ulæseligt igen. Mvh. Thomas

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Frank    22-12-2013

Totalt ulæseligt..Hvad med at bruge sort på hvidt så det er læseligt.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    11-04-2013

Hej igen, Det ved jeg faktisk ikke... prøv at spørge på forum.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
ChristianS    11-04-2013

Et link med titlen, mente jeg

kommentar på NemProgrammering.dk - lav din egen hjemmeside
ChristianS    11-04-2013

Tak, Thomas, og øv, er der så mulighed for at man kunne lave et link, der ikke er den del af html5 audio elementet, som trykke på play og sætte musikken. Altså et link et sted på siden, og html5 musikfilen på et andet sted på siden. Mvh Christian

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    08-04-2013

Som det er lige nu, så er der desværre ingen mulighed for at trække titel info på lydfilen ud. Derfor er der ikke andet for end at skrive titlen på sangen over afspilleren...

kommentar på NemProgrammering.dk - lav din egen hjemmeside
ChristianS    07-04-2013

Hej. Jeg har lige set jeres video om audio og video tags, og jeg har et spørgsmål: Hvis man har indsat en audiofil med html5, så får man det element med play knap osv. Men kan man få den til at vise titlen på audiofilen? Enten ved at skrive en titel et eller andet sted eller at man henter navnet på audiofilen. På forhånd tak Christian

kommentar på NemProgrammering.dk - lav din egen hjemmeside
frqmand    21-03-2013

Jeg kan ikke få hverken audio eller lydfil til at fungere. Jeg får bare en meddelelse i browseren om at den ikke understøtter MIME? regards Christian

kommentar på NemProgrammering.dk - lav din egen hjemmeside
NemProgrammering.dk    19-10-2012

Hej Christian, Se her: http://stackoverflow.com/questions/6326317/does-html5-support-wmv-and-mp4-files

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Christian    19-10-2012

Hej. Jeg har en wmv fil der ikke duer. Er det en anden kode? Mvh CHristian

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Magnus    04-09-2012

Hej :) vil bare vide om man kunne gøre så at video'en starte i lille format og så kan man trykke for at få i fuldskærm?