Jump to content

Recommended Posts

Ä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/

Edited by JoWa
Link to comment
Share on other sites

  • 2 weeks later...

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.

Edited by Nicklas
Link to comment
Share on other sites

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:

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...

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.

Link to comment
Share on other sites

  • 4 weeks later...
  • 1 month later...

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>
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

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

Loading...
 Share

×
×
  • Create New...