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/

Redigerad av JoWa

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Verkar ju jättelätt... Kommer man avsluta som du skrev ?

<audio src="ljudfil.ogg" controls>
</audio>

eller man kan avsluta

<audio src="ljudfil.ogg" controls />

:) ?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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:

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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>

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Registrera ett nytt konto i våran gemenskap. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu


  • Liknande innehåll

    • Av JoWa
      Googles länge omtalade lagringstjänst Drive lanserades slutligen i går. Drive är en vidareutveckling av Google Dokument (Docs), och ersätter den äldre tjänsten, om man väljer att aktivera Drive (https://docs.google.com omdirigeras då till https://drive.google.com). Oavsett om aktiverar Drive eller behåller Dokument, bjuds 5 GB gratis utrymme. Alla funktioner i Dokument finns kvar i Drive, och ett synkroniseringsprogram tillkommer.

      Google Drive
      Angående utrymmet:
      Du använder för närvarande X MB (X %) av dina 5120 MB. Det är enbart lagrade filer (.PDF, .DOC, .JPG, etc.) som tas med i beräkningen av lagringsutrymmet. Google Dokument-format tas inte med i beräkningen av lagringsutrymmet. För att läsa mer om, och komma igång med Drive: https://drive.google.com/start
      Eventuellt möts man av beskedet ”Din Google Drive är inte redo ännu”. Min Drive var dock redo i går kväll.
      Hjälp för Google Drive: https://support.goog...om/drive/?hl=sv
      För att hämta programmet Google Drive för Windows eller OS X (”Stöds (ännu) inte för Linux.”): https://tools.google...rive/index.html

      För Android: https://play.google....droid.apps.docs
      Drive för iOS skall komma senare. Har ej sett något om Windows Phone.
      Presentation av Drive: Idag presenterar vi Google Drive - den nyaste medlemmen i Google Apps
      Som alltid, bör man läsa användarvillkoren, som bl.a. säger:
      När du lägger upp eller på annat sätt skickar in innehåll till våra tjänster ger du Google (och våra samarbetspartner) en global licens att använda, värdlagra, spara, återge, ändra, skapa härledda verk (exempelvis översättningar, anpassningar eller modifieringar som vi gör så att ditt innehåll fungerar bättre med våra tjänster), kommunicera, publicera, framföra offentligt och distribuera innehållet. Jag hade väntat att det utökade utrymmet i Drive/Dokument skulle kunna nyttjas i Picasa webbalbum, men den tjänsten tycks förbli separat, och begränsad till 1 GB gratis utrymme.
      Däremot passade Google på att utöka utrymmet i Gmail till 10 GB, för att fira lanseringen av Drive.
    • Av Superlight
      Det släpptes en ny version igår och några av nyheterna är att du kan gå under vattnet och gå bakåt i tiden.

      Hämta här:
      http://earth.google.com/
    • Av haki08
      Hej, jag undrar vilka fördelar/nackdelar är det att byta från Automatisk tilldelad DNS till Google:s Dns?
    • Av johnh3
      Paul Thurrott hade en bra sammanställning om vad som ska komma:
      http://winsupersite.com/mobile-devices/google-io-2014-android-takes-l
       
      Generellt kan man säga att det blir Android överallt vare sig det är datorer, smartphones, bilar, TV apparater och klockor:
      http://windowsitpro.com/paul-thurrotts-wininfo/google-announces-massive-expansion-android
       
      Man kanske kan säga att det är ett slags paradigmskifte från Microsoft/Windows (och naturligtvis påverkar det Apple också)  i en större mening, även om de i sin tur anpassar sin strategi eftersom.
       
      Var en intressant diskussion om det på den senaste What the Tech:
      http://www.gfqnetwork.com/shows/whatthetech/216-google-io-recap-6-26-14/
       
      Jag tror dock satsningen på billigare smartphones som inkluderar Google Play även i utvecklingsmarknader slår undan möjligheterna för Firefox OS att klara sig:
      https://www.idg.se/2.1085/1.567684/firefox-os--inte-dar-annu
       
      De är helt enkelt försent ute.
    • Av bojoh
      När jag startar internet Explorer, så skulle jag helst vilja slippa google som sökmotor, kan man byta ut mot något annat, tycker jag blir utsatt för så mycket riktad reklam och skulle helst vilja slippa detta.
       
      Operativsystemet är windows 7
    • Av JoWa
      Lenovo to acquire Motorola Mobility (Google Official Blog)