Webb­utveckling

Ljud och video

Att få in ljud och video på din webbsida är nästan lika lätt som att få in en bild. För att få in ljud och video så använder man sig av elementen <audio> respektive <video>. Till skillnad från <img> så är <audio> och <video> inte tomma taggar.

Ljud- och videoelementen fungerar till stora delar likadant. De har många gemensamma attribut och gör egentligen samma grej: spelar upp media.

<audio>

Det finns två huvudsakliga sätt att använda sig utav <audio>

<audio controls src="minljudfil" type="audio/XXX"></audio>

Alternativt:

<audio controls>
	<source src="minljudfil" type="audio/XXX"/>	
</audio>

Metod ett är den lättaste men också den som är minst kompatibel med olika webbläsare. Metod två kan expanderas så att den fungerar med alla olika webbläsare:

<audio controls>
	<source src="minljudfil1" type="audio/XXX"/>
	<source src="minljudfil2" type="audio/YYY"/>
	<source src="minljudfil3" type="audio/ZZZ"/>
</audio>

Här kan du lägga upp samma ljud fast i olika format och så att varje webbläsare spelar upp ljudet så bra som möjligt. Det här fungerar som så att din webbläsare först försöker öppna den första filen, går inte det så testar den nästa osv. I praktiken är det kanske lättast att välja ett format på ljudet som alla klarar av, exempelvis .mp3. Annars kan man hoppas på att ingen använder Explorer och köra på FLAC som har det bästa ljudet och som alla de övriga klarar av.

controls

Attributet controls gör så att man kan se play-knappen och volymkontrollen.

type

Attributet type berättar för webbläsaren vad det är för sorts mediafil och hur den ska spelas upp. En lista över olika filformat kommer längre ner.

loop

loop är ett annat attribut som berättar för webbläsaren att ljudet eller videon ska upprepas.

autoplay

Ett trixigt attribut som inte fungerar i alla webbläsare.

preload

Det här attributet berättar hur filen ska förladdas. Man kan ge den tre olika värden:

none

Ska inte förladdas

metadata

Laddar typ bara hur lång den är osv.

auto

Laddar filen direkt

Det är värt att veta att autoplay kör över preload och att alla webbläsare inte nödvändigtvis lyssnar på attributet ändå.

<video>

Kommandot för att spela upp video fungerar likadant som det som spelar upp audio:

<video controls>
	<source src="videofil" type="video/XXX">
</video>

Precis som för bilder så måste bilden antingen ligga på samma ställe som koden eller så kan man länka till videon med dess url.

YouTube

Om man vill länka till en video på YouTube så är de så snälla att om man högerklickar på en video så kan man välja "kopiera inbäddningskod" och bara klistra in det i sin kod:

<iframe width="450" height="253" src="https://www.youtube.com/embed/bS4Q-WWyl3Q" 
	frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
	gyroscope; picture-in-picture" allowfullscreen>
</iframe>

Filformat

Precis som med bilder så finns det olika filformat som passar till olika saker. Tillskillnad från bilder så klarar inte alla webbläsare av alla ljud- eller videoformat.

Ljudformat

WAV

WAV (WAVE) är ett okomprimerat filformat som tar mer plats än MP3, men utan ljudförlust.

MP3

Det kanske mest kända och vanliga filformatet. Stöds av alla webbläsare. MP3-formatet komprimerar originalfilen vilket leder till att en del information (ljud) försvinner.

MP4

MP4 är ett filformat för både ljud och video. Vanligtvis använder filer med enbart ljud ändelsen .m4a. Stöds av alla (Firefox kan spela upp det genom opererativsystemet)

AAC

Advanced Audio Codec är en förbättring av MP3-formatet som ska ta lika mycket utrymme men ha högre ljudkvalitet.

Ogg

Det finns tre huvudsakliga varianter av Ogg:

.ogg

Vorbis audio-fil

.oga

För rena ljudfiler

.ogv

För videofiler

WebM

Motsvar WebP för ljud och video.

FLAC

Free Lossless Audio Codec är ett filformat som behåller all information i en ljudfil och ger på så vis en bätter ljudkvalitet än exempelvis mp3. Priset för detta är att ljudfilen blir större.

Videoformat

MP4

Det finns två varianter av MP4 som fungerar lite olika. Den ena versionen fungerar på alla webbläsare, den andra fungerar på Android och Safari.

Ogg

Video-versionen av .ogg.

WebM

Videoversionen av WebM.