Jump to content

  • Log in with Facebook Log in with Twitter Logga in via Google      Logga in   
  • Registrera konto


* * * * * 2 röster

HTML5 + <audio> & <video>

html5 WebM VP8 Vorbis Ogg Google Xiph.org

  • Vänligen logga in för att svara
66 svar i den här tråden

#1 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 11 juni 2010 - 21:50

Ä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: http://en.wikipedia....atent_licensing respektive http://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.


Posted Image Posted Image

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! Posted Image

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

<html>[/font]
[font=georgia,serif]<head>[/font]
[font=georgia,serif]<title>video-test</title>[/font]
[font=georgia,serif]</head>[/font]
[font=georgia,serif]<body>[/font]
[font=georgia,serif]<video src="videofil.webm" controls>[/font]
[font=georgia,serif]</video>[/font]
[font=georgia,serif]</body>[/font]
[font=georgia,serif]</html>


Och en lika enkel sida med ljud (Vorbis) och samma kontroller som i videoexemplet:
<html>[/font]
[font=georgia,serif]<head>[/font]
[font=georgia,serif]<title>audio-test</title>[/font]
[font=georgia,serif]</head>[/font]
[font=georgia,serif]<body>[/font]
[font=georgia,serif]<audio src="ljudfil.ogg" controls>[/font]
[font=georgia,serif]</audio>[/font]
[font=georgia,serif]</body>[/font]
[font=georgia,serif]</html>


För att koda video i WebM-format, kan XMedia Recode användas.

WebM-kompatibel ChromePlus (stabil): http://www.chromeplus.org/
WebM-kompatibel Chromium (nattbyggen): http://build.chromiu...hromium-rel-xp/
WebM-kompatibel Comodo Dragon (stabil): https://www.comodo.c...ars/browser.php
WebM-kompatibel Firefox (stabil): https://www.mozilla.com/sv-SE/firefox/
WebM-kompatibel Google Chrome (stabil): http://www.google.com/chrome
WebM-kompatibel Maxthon Browser (stabil): http://www.maxthon.com/mx3/
WebM-kompatibel Opera (stabil): http://www.opera.com/browser/download/
WebM-kompatibel SeaMonkey (stabil): http://www.seamonkey-project.org/
WebM-kompatibel SRWare Iron (stabil): http://www.srware.ne...on_download.php

Internet Explorer 9 stöder WebM, men en avkodare måste installeras separat. En sådan 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 Alla nya videor konverterats till WebM, och konvertering av äldre videor pågår för fullt. Posted Image

WebM-projektets sida: http://www.webmproject.org/
Vorbis: http://vorbis.com/
Theora: http://www.theora.org/
Matroška: http://www.matroska.org/


Det här inlägget har redigerats av JoWa: 17 november 2011 - 08:07


Spoiler


ANNONS:
  • Inte din sorts mobil? Jämför priser på fler hos

#2 Nicklas

Nicklas
  • Medlem
  • PipPipPipPipPipPipPipPip
  • 2 355 inlägg
  • Kön:Man

Skrivet 11 juni 2010 - 22:19

Tack för mycket intressant läsning! Detta ska jag kika vidare på i helgen.

Antec P182 SE | Corsair 620HXEU | Gigabyte GA-P35-DS3R | Intel C2D E6750 | Corsair 6400C4DHX 4x1024MB | 60GB SSD , 2500GB Int , 500GB Ext | ATI HD2900XT 512MB | Benq FP241W 24" , Viewsonic VP201b 20.1" | Creative X-Fi Fatal1ty FPS | Logitech Z-5500 Digital | Philips SBC HP1000 | Zalman ZM-MIC 1 | Logitech Illuminated Keyboard | Logitech MX1100 | Win 7 Ultimate x64

#3 e-son

e-son

    e-compressed

  • Hedersmedlem
  • 8 850 inlägg
  • Kön:Inte valt
  • Från:Majorna

Skrivet 12 juni 2010 - 06:19

Intressant och bra info. Tack!   :)

...och ett väldigt seriöst och banbrytande live-test...!   :rolleyes:

Spoiler

•`°²º¤æ-.,¸ <°)))>< ¸,.-椺²°`• Endast döda fiskar följer strömmen •`°²º¤æ-.,¸ <°)))>< ¸,.-椺²°`•

thinkbigger


#4 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 12 juni 2010 - 07:04

:D En dansande ko kommer att hjälpa WebM till framgång!

En testsida som har alternativa videor: mp4 (AVC+AAC), Ogg (Theora+Vorbis), WebM (VP8+Vorbis): http://camendesign.c...ybody/test.html


Spoiler

#5 Venoms

Venoms
  • Hedersmedlem
  • 5 773 inlägg
  • Kön:Man
  • Från:Huskvarna

Skrivet 13 juni 2010 - 13:26

Tack för den infon, den ska utnyttjas :P

Privat support lämnas inte via PM, skriv ett inlägg i forumet istället.

ITpoolen - Ert företags totalleverantör inom IT
Spoiler

#6 arnada

arnada
  • Medlem
  • PipPipPipPipPipPipPipPip
  • 1 061 inlägg
  • Kön:Man
  • Från:Skåne, Hässleholm, Malmö och Småland

Skrivet 23 juni 2010 - 21:47

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

:) ?

HACKER UNIT - GUIDER SOM GÖR LIVET LITE MER KOMPLICERAT
http://www.hackerunit.se

Spotify Playlists music.hackerunit.se

#7 e-son

e-son

    e-compressed

  • Hedersmedlem
  • 8 850 inlägg
  • Kön:Inte valt
  • Från:Majorna

Skrivet 24 juni 2010 - 04:52

Mitt lilla test visar "<video src="filmfil.webm" controls></video>" så du måste nog avsluta med </audio>.

Spoiler

•`°²º¤æ-.,¸ <°)))>< ¸,.-椺²°`• Endast döda fiskar följer strömmen •`°²º¤æ-.,¸ <°)))>< ¸,.-椺²°`•

thinkbigger


#8 Nicklas

Nicklas
  • Medlem
  • PipPipPipPipPipPipPipPip
  • 2 355 inlägg
  • Kön:Man

Skrivet 24 juni 2010 - 09:56

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.

Det här inlägget har redigerats av Nicklas: 24 juni 2010 - 09:58


Antec P182 SE | Corsair 620HXEU | Gigabyte GA-P35-DS3R | Intel C2D E6750 | Corsair 6400C4DHX 4x1024MB | 60GB SSD , 2500GB Int , 500GB Ext | ATI HD2900XT 512MB | Benq FP241W 24" , Viewsonic VP201b 20.1" | Creative X-Fi Fatal1ty FPS | Logitech Z-5500 Digital | Philips SBC HP1000 | Zalman ZM-MIC 1 | Logitech Illuminated Keyboard | Logitech MX1100 | Win 7 Ultimate x64

#9 e-son

e-son

    e-compressed

  • Hedersmedlem
  • 8 850 inlägg
  • Kön:Inte valt
  • Från:Majorna

Skrivet 24 juni 2010 - 10:27

View PostNicklas, den 24 juni 2010 - 09:56 , skrev:

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:

Spoiler

•`°²º¤æ-.,¸ <°)))>< ¸,.-椺²°`• Endast döda fiskar följer strömmen •`°²º¤æ-.,¸ <°)))>< ¸,.-椺²°`•

thinkbigger


#10 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 25 juni 2010 - 02:46

Man kan skapa en mer avancerad ljudspelare med JavaScript: http://www.jplayer.org/ B)

Det här inlägget har redigerats av JoWa: 10 april 2011 - 17:59


Spoiler

#11 arnada

arnada
  • Medlem
  • PipPipPipPipPipPipPipPip
  • 1 061 inlägg
  • Kön:Man
  • Från:Skåne, Hässleholm, Malmö och Småland

Skrivet 28 juni 2010 - 22:59

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

Citat

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

HACKER UNIT - GUIDER SOM GÖR LIVET LITE MER KOMPLICERAT
http://www.hackerunit.se

Spotify Playlists music.hackerunit.se

#12 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 29 juni 2010 - 04:50

Everything you need to know about HTML5 video and audio (Dev.Opera)

HTML 5 Reference — A Web Developer’s Guide to HTML 5


Spoiler

#13 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 15 juli 2010 - 07:56

Mer läsning: Video on the Web

Spoiler

#14 Nicklas

Nicklas
  • Medlem
  • PipPipPipPipPipPipPipPip
  • 2 355 inlägg
  • Kön:Man

Skrivet 15 juli 2010 - 19:32

Lite off-topic men är inte du i Beijing och borde ha bättre saker att göra än att surfa teknikporr?  B)

Antec P182 SE | Corsair 620HXEU | Gigabyte GA-P35-DS3R | Intel C2D E6750 | Corsair 6400C4DHX 4x1024MB | 60GB SSD , 2500GB Int , 500GB Ext | ATI HD2900XT 512MB | Benq FP241W 24" , Viewsonic VP201b 20.1" | Creative X-Fi Fatal1ty FPS | Logitech Z-5500 Digital | Philips SBC HP1000 | Zalman ZM-MIC 1 | Logitech Illuminated Keyboard | Logitech MX1100 | Win 7 Ultimate x64

#15 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 16 juli 2010 - 02:39

Borde väl det… men en stund vid datorn måste man unna sig emellanåt, för att hålla sig i form. :P  B)

Spoiler

#16 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 25 juli 2010 - 08:39

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.


Spoiler

#17 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 29 juli 2010 - 16:14

World's first event streamed live using WebM B)

Spoiler

#18 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 31 juli 2010 - 09:37

Har uppdaterat listan med WebM-kompatibla webbläsare, och lagt till SeaMonkey 2.1 (alfa). Bland mediaspelare är VLC inte längre ensamt om att kunna spela upp WebM: http://www.webmproject.org/users/

Spoiler

#19 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 01 augusti 2010 - 21:06

Mer från Dev.Opera:

An HTML5 <audio> radio player

Building a custom HTML5 video player with CSS3 and jQuery


Spoiler

#20 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 8 081 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 24 augusti 2010 - 15:45

HTML5 Video (HTML5Rocks)

Spoiler





Andra trådar taggade med något av följande nyckelord: html5, WebM, VP8, Vorbis, Ogg, Google, Xiph.org

0 användare läser den här tråden

0 medlemmar, 0 gäster, 0 anonyma användare