Jump to content

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


Foto
* * * * * 3 röster

HTML5 + <audio> & <video>

html5 WebM VP8 Vorbis Ogg Google Xiph.org Opus VP9

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

#1 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 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.

 

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) 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) 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, kan XMedia Recode användas.


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): https://www.google.com/chrome
WebM-kompatibel Maxthon Browser (stabil): http://www.maxthon.com/
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 och 10 stöder WebM, men en avkodare 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 Alla nya videor konverterats till WebM, och konvertering av äldre videor har slutförts. wink.gif

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: 15 mars 2013 - 19:50


Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere



ANNONS:

#2 Nicklas

Nicklas
  • Hedersmedlem
  • 2 862 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.

Fractal Design Define R4 | Fractal Design Newton R3 600W | Asus P8Z77-V Deluxe | Intel Core i7-3770K | Phanteks PH-TC14PE | Corsair Vengeance LP 4x4GB RAM | Samsung 840 Pro 256GB SSD , Western Digital Green 2TB HDD | Asus GeForce GTX680 Direct CU II 4GB | Benq FP241W 24" | Logitech Z-5500 Digital | Philips SBC HP1000 | Samson GoMic USB | Logitech Illuminated Keyboard | Logitech MX1100 | Windows 8.1 Pro x64 | Synology DS413j , Western Digital Red 4*3TB HDD


#3 e-son

e-son

    e-compressed

  • Hedersmedlem
  • 9 536 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:

Ingen support via PM! Skriv ett inlägg i lämplig forumdel, så hjälper jag gärna till när jag kan.

Spoiler

 

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

thinkbigger


#4 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 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


Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#5 Venoms

Venoms
  • Hedersmedlem
  • 6 313 inlägg
  • Kön:Man
  • Från:Huskvarna
  • Intressen:Det mesta man blir glad av...

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 068 inlägg
  • Kön:Man
  • Från:Skåne

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

:) ?

Novastream Hosting & Web Solutions AB

http://www.novastream.se

#7 e-son

e-son

    e-compressed

  • Hedersmedlem
  • 9 536 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>.

Ingen support via PM! Skriv ett inlägg i lämplig forumdel, så hjälper jag gärna till när jag kan.

Spoiler

 

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

thinkbigger


#8 Nicklas

Nicklas
  • Hedersmedlem
  • 2 862 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


Fractal Design Define R4 | Fractal Design Newton R3 600W | Asus P8Z77-V Deluxe | Intel Core i7-3770K | Phanteks PH-TC14PE | Corsair Vengeance LP 4x4GB RAM | Samsung 840 Pro 256GB SSD , Western Digital Green 2TB HDD | Asus GeForce GTX680 Direct CU II 4GB | Benq FP241W 24" | Logitech Z-5500 Digital | Philips SBC HP1000 | Samson GoMic USB | Logitech Illuminated Keyboard | Logitech MX1100 | Windows 8.1 Pro x64 | Synology DS413j , Western Digital Red 4*3TB HDD


#9 e-son

e-son

    e-compressed

  • Hedersmedlem
  • 9 536 inlägg
  • Kön:Inte valt
  • Från:Majorna

Skrivet 24 juni 2010 - 10:27

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:

Ingen support via PM! Skriv ett inlägg i lämplig forumdel, så hjälper jag gärna till när jag kan.

Spoiler

 

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

thinkbigger


#10 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 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


Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#11 arnada

arnada
  • Medlem
  • PipPipPipPipPipPipPipPip
  • 1 068 inlägg
  • Kön:Man
  • Från:Skåne

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

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

Novastream Hosting & Web Solutions AB

http://www.novastream.se

#12 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 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


Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#13 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 15 juli 2010 - 07:56

Mer läsning: Video on the Web

Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#14 Nicklas

Nicklas
  • Hedersmedlem
  • 2 862 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)

Fractal Design Define R4 | Fractal Design Newton R3 600W | Asus P8Z77-V Deluxe | Intel Core i7-3770K | Phanteks PH-TC14PE | Corsair Vengeance LP 4x4GB RAM | Samsung 840 Pro 256GB SSD , Western Digital Green 2TB HDD | Asus GeForce GTX680 Direct CU II 4GB | Benq FP241W 24" | Logitech Z-5500 Digital | Philips SBC HP1000 | Samson GoMic USB | Logitech Illuminated Keyboard | Logitech MX1100 | Windows 8.1 Pro x64 | Synology DS413j , Western Digital Red 4*3TB HDD


#15 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 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)

Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#16 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 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.


Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#17 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 29 juli 2010 - 16:14

World's first event streamed live using WebM B)

Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#18 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 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/

Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#19 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 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


Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere


#20 JoWa

JoWa

    Cr

  • Hedersmedlem
  • 10 940 inlägg
  • Kön:Man
  • Från:Eknäs

Skrivet 24 augusti 2010 - 15:45

HTML5 Video (HTML5Rocks)

Ubuntu 14.04, 64-bit | Chrome 37β | HTTPS Everywhere






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

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