Gå till innehåll

HTML5 + <audio> & <video>

JoWa
 Dela

Recommended Posts

JoWa

JoWa

Postad
Postad (redigerade)

Äntligen är det lika lätt att infoga en video- eller ljudfil som en bild i en webbsida! HTML5 håller på att bli en användbar teknik, i takt med att stöd för den nya standarden inkluderas och utökas i nya versioner av webbläsarna. Kan man ladda upp en ljud- eller videofil till en server, kan man också med mycket enkel html-kod göra den spelbar på sidan, direkt i webbläsaren, utan Flash Player, Silverlight, QuickTime Player eller något annat tilläggsprogram.

En förutsättning för att det skall fungera är, förutom att <audio> och/eller <video> måste stödjas, är att det valda formatet kan avkodas av webbläsaren. Det vanligaste videoformatet är Advanced Video Coding (AVC eller H.264), som bl.a. används på YouTube. Ljudformatet är där Advanced Audio Coding (AAC). AVC och AAC är tekniskt sett helt förträffliga och ingår i mpeg-4 (AAC ingår även i mpeg-2), som är en ISO-standard. Därmed är det väl klart att dessa format skall bli standardformat i html5? Det finns ett problem med dessa format: patent och licens! Läs om detta i Wikipedia: https://en.wikipedia....atent_licensing respektive https://en.wikipedia....ing_and_patents

Det behövs fria alternativ till dessa proprietära, patenterade format, det behövs format med öppen källkod!

Ett videoformat med öppen källkod är VP3, utvecklat av On2 Technologies, och till en början (2000) proprietärt, men sedan september 2001 är källkoden öppen. 2002 donerades koden till Xiph.org Foundation, som använde VP3 som grund för ett nytt öppet format, Theora. Problemet är att Theora inte ger lika hög kvalitet som AVC vid samma dataflöde. Formatet stöds av Chromium, Firefox och Opera. Efter VP3 har On2 Technologies utvecklat VP4 (2001), VP5 (2002), VP6 (2003), VP7 (2005), och senast VP8 (2008). Alla dessa har varit proprietära, men 5 augusti 2009 meddelade Google att de ville köpa On2 Technologies… Det godkändes den 17 februari i år, och den 19 maj meddelade Google att VP8:s källkod görs öppen… VP8 är videoformatet i WebM-projektet. Behållaren är baserad på Matroška, men tillåter inga andra format än VP8 och Vorbis.

 

200px-HTML5-logo.svg.png

 

200px-WebM_logo.svg.png


Men video är inte fullständig utan ljud, och det finns ett stort behov av ljud utan video. Här är valet dock lätt: Vorbis, ett öppet format med minst lika hög ljudkvalitet som AAC! Vorbis används också ihop med Theora. Vorbis i Ogg-behållare stöds av Chromium, Firefox och Opera.

Efter allt babblande, över till exempel! biggrin.gif

En enkel html-sida med video (WebM; VP8, VP9) och kontroller (play/paus, förloppsindikator, tid, volymkontroll):

<html>
<head>
<title>video-test</title>
</head>
<body>
<video src="videofil.webm" controls>
</video>
</body>
</html>

Och en lika enkel sida med ljud (Vorbis, Opus) och samma kontroller som i videoexemplet:

<html>
<head>
<title>audio-test</title>
</head>
<body>
<audio src="ljudfil.ogg" controls>
</audio>
</body>
</html>

För att koda video i WebM-format (VP8, VP9, Vorbis, Opus), kan t.ex. XMedia Recode användas.

WebM-kompatibel Comodo Dragon: https://www.comodo.c...ars/browser.php
WebM-kompatibel Firefox: https://www.mozilla.com/sv-SE/firefox/
WebM-kompatibel Google Chrome: https://www.google.com/chrome
WebM-kompatibel Maxthon Browser: http://www.maxthon.com/
WebM-kompatibel Opera: http://www.opera.com/browser/download/
WebM-kompatibel SeaMonkey: http://www.seamonkey-project.org/
WebM-kompatibel SRWare Iron: http://www.srware.ne...on_download.php

Internet Explorer 9+ stöder WebM, men avkodare för VP8 och Vorbis måste installeras separat. En sådan tillhandahålls av Google och kan hämtas här. Källa: http://blogs.msdn.co...deo-in-ie9.aspx Se även Introducing WebM in Internet Explorer 9

Med någon av de kompatibla webbläsarna kan man se WebM-videor i html5-versionen av YouTube: https://www.youtube.com/html5

WebM-projektets sida: http://www.webmproject.org/
Vorbis: http://vorbis.com/

Opus: http://opus-codec.org/
Theora: http://www.theora.org/
Matroška: http://www.matroska.org/

Redigerad av JoWa
Länk till kommentar
Dela på andra webbplatser
  • Svar 270
  • Skapat
  • Senaste svar

Toppostare i den här tråden

Populära dagar

Toppostare i den här tråden

Populära dagar

Pouplära inlägg

e-son
e-son

Intressant och bra info. Tack! ...och ett väldigt seriöst och banbrytande live-test...!

JoWa
JoWa

ITU-medlemmarna har enats om efterträdaren till videokodeken AVC/H.264, kallad High Efficiency Video Coding, HEVC/H.265.   Pressmeddelande: New video codec to ease pressure on global networks   H.

Bilder i tråden

  • 2 veckor senare...
Nicklas

Nicklas

Postad
Postad (redigerade)

Strider det inte mot "god semantik" eller vad man ska kalla det att använda "tomma taggar" i html/xhtml? Jag menar alltså att arnadas andra exempel där man öppnar o stänger i samma tagg borde vara mer korrekt ur den synpunkten. Huruvida det funkar bättre eller sämre eller alls i just detta fallet låter jag dock vara osagt.

Redigerad av Nicklas
Länk till kommentar
Dela på andra webbplatser
e-son

e-son

Postad
Postad

Strider det inte mot "god semantik" eller vad man ska kalla det att använda "tomma taggar" i html/xhtml? Jag menar alltså att arnadas andra exempel där man öppnar o stänger i samma tagg borde vara mer korrekt ur den synpunkten. Huruvida det funkar bättre eller sämre eller alls i just detta fallet låter jag dock vara osagt.

Kan mycket väl tänkas...! Dels är jag verkligen ingen expert på "webbkod", dels använde jag mig av "snabbmetoden" att tillverka sidan i Office Publisher... och det vet vi ju alla hur väl det stämmer överens med webbstandard.... :rolleyes:

Länk till kommentar
Dela på andra webbplatser
arnada

arnada

Postad
Postad

Rent generellt så brukar det väl vara att när du inte har något mellan <tagg>HÄR</tagg> så brukar man kunna avsluta <tagg />...

Läste lite på W3 och där stod så här

You can write text inside the start and end audio tags, to show older browser that they do not support this tag.

Så antagligen måste man använda en slut tag så äldre läsare visar texten där ex. spelaren ska vara...

Länk till kommentar
Dela på andra webbplatser
  • 3 veckor senare...
  • 2 veckor senare...
JoWa

JoWa

Postad
  • Författare
Postad

Man kan också konvertera till WebM med VLC!

Sålunda: Media, Konvertera / Spara Lägg till en video att konvertera. Tryck på Konvertera / Spara. Välj namn och plats för den konverterade filen. Under Inställningar, välj Video - VP80 + Vorbis (WebM). (Tryck på verktygssymbolen för att ändra inställningar.) Tryck på Starta.

Länk till kommentar
Dela på andra webbplatser
  • 4 veckor senare...
  • 1 månad senare...
JoWa

JoWa

Postad
  • Författare
Postad

I videofönstrets övre högra hörn står det Ogg då den spelas upp i Firefox 3.6.

I källkoden kan man se att dessa varianter finns:

<select class="video-select">	
  <option src-webm="http://downloads.xiph.org/video/A_Digital_Media_Primer_For_Geeks-360p.webm"
	  src-ogg="http://downloads.xiph.org/video/A_Digital_Media_Primer_For_Geeks-360p.ogv"
	  poster="vid1-poster-360.jpg"
	  video-width="640px" 
	  video-height="360px" 
	  subtitle-font-size="1.6em"
	  subtitle-bottom="60px">
    360p</option>
  <option src-webm="http://downloads.xiph.org/video/A_Digital_Media_Primer_For_Geeks-480p.webm"
	  src-ogg="http://downloads.xiph.org/video/A_Digital_Media_Primer_For_Geeks-480p.ogv"
	  poster="vid1-poster-480.jpg"
	  video-width="854px" 
	  video-height="480px" 
	  subtitle-font-size="2em"
	  subtitle-bottom="80px">
    480p</option>

  <option src-webm="http://downloads.xiph.org/video/A_Digital_Media_Primer_For_Geeks-720p.webm"
	  src-ogg="http://downloads.xiph.org/video/A_Digital_Media_Primer_For_Geeks-720p.ogv"
	  poster="vid1-poster-720.jpg"
	  video-width="1280px" 
	  video-height="720px" 
	  subtitle-font-size="2em"
	  subtitle-bottom="120px">
    720p</option>
</select>
Länk till kommentar
Dela på andra webbplatser
JoWa

JoWa

Postad
  • Författare
Postad

Kunde inte låta bli att konvertera en video till WebM och lägga den i min Dropbox! :D

Konverterade Big Buck Bunny (1280×720) från Ogg (Theora + Vorbis) till WebM (VP8 + Vorbis). Ljudet hade redan rätt format (Vorbis), och har inte kodats om.

Använde XMedia Recode 2.2.7.2, och 2-passkodning. Inställt dataflöde: 1 500 kbps (genomsnitt), 2 500 (max). 24 bilder/sekund.

Genomsnittligt dataflöde för ljud: 176 kbps (inställning: 192 kbps = q6). Samplingsfrekvens: 48 kHz, bitdjup: 16 bitar.

Ogg-filens storlek: 187 MB

WebM-filens storlek: 139 MB

Har lagt till koden

<meta http-equiv="X-UA-Compatible" content="chrome=1">

för användare av IE + Google Chrome Frame.

Titta: Big Buck Bunny

Länk till kommentar
Dela på andra webbplatser

Delta i dialogen

Du kan skriva svaret nu och registrera dig senare, Om du har ett konto, logga in nu för att svara på inlägget.

Gäst
Svara i detta ämne...

×   Du har klistrat in innehåll med formatering.   Ta bort formatering

  Only 75 emoji are allowed.

×   Din länk har automatiskt bäddats in.   Visa som länk istället

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Dela
Gå till ämneslista
×
×
  • Skapa nytt...