JoWa Postad Juni 11, 2010 Dela Postad Juni 11, 2010 (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_patentsDet 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. 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! 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.phpWebM-kompatibel Firefox: https://www.mozilla.com/sv-SE/firefox/WebM-kompatibel Google Chrome: https://www.google.com/chromeWebM-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.phpInternet 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 9Med någon av de kompatibla webbläsarna kan man se WebM-videor i html5-versionen av YouTube: https://www.youtube.com/html5WebM-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 November 22, 2014 av JoWa Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
Nicklas Postad Juni 11, 2010 Dela Postad Juni 11, 2010 Tack för mycket intressant läsning! Detta ska jag kika vidare på i helgen. Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
e-son Postad Juni 12, 2010 Dela Postad Juni 12, 2010 Intressant och bra info. Tack! ...och ett väldigt seriöst och banbrytande live-test...! 1 Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Juni 12, 2010 Författare Dela Postad Juni 12, 2010 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.com/code/video_for_everybody/test.html Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
Venoms Postad Juni 13, 2010 Dela Postad Juni 13, 2010 Tack för den infon, den ska utnyttjas Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
arnada Postad Juni 23, 2010 Dela Postad Juni 23, 2010 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 /> ? Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
e-son Postad Juni 24, 2010 Dela Postad Juni 24, 2010 Mitt lilla test visar "<video src="filmfil.webm" controls></video>" så du måste nog avsluta med </audio>. Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
Nicklas Postad Juni 24, 2010 Dela Postad Juni 24, 2010 (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 Juni 24, 2010 av Nicklas Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
e-son Postad Juni 24, 2010 Dela Postad Juni 24, 2010 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.... Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Juni 25, 2010 Författare Dela Postad Juni 25, 2010 (redigerade) Man kan skapa en mer avancerad ljudspelare med JavaScript: http://www.jplayer.org/ Redigerad April 10, 2011 av JoWa Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
arnada Postad Juni 28, 2010 Dela Postad Juni 28, 2010 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... Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Juni 29, 2010 Författare Dela Postad Juni 29, 2010 Everything you need to know about HTML5 video and audio (Dev.Opera) HTML 5 Reference A Web Developers Guide to HTML 5 Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Juli 15, 2010 Författare Dela Postad Juli 15, 2010 Mer läsning: Video on the Web Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
Nicklas Postad Juli 15, 2010 Dela Postad Juli 15, 2010 Lite off-topic men är inte du i Beijing och borde ha bättre saker att göra än att surfa teknikporr? Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Juli 16, 2010 Författare Dela Postad Juli 16, 2010 Borde väl det men en stund vid datorn måste man unna sig emellanåt, för att hålla sig i form. Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Juli 25, 2010 Författare Dela Postad Juli 25, 2010 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. Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Juli 29, 2010 Författare Dela Postad Juli 29, 2010 World's first event streamed live using WebM Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Juli 31, 2010 Författare Dela Postad Juli 31, 2010 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/ Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Augusti 1, 2010 Författare Dela Postad Augusti 1, 2010 Mer från Dev.Opera: An HTML5 <audio> radio player Building a custom HTML5 video player with CSS3 and jQuery Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad Augusti 24, 2010 Författare Dela Postad Augusti 24, 2010 HTML5 Video (HTML5Rocks) Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad September 25, 2010 Författare Dela Postad September 25, 2010 A Digital Media Primer for Geeks är den första i en serie videor från Xiph.Org. Videon är i WebM-format, förstås. Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
Nicklas Postad September 25, 2010 Dela Postad September 25, 2010 Hmmm. Det funkade inte sist jag testade men nu i Firefox 3.6.10 går det ju bra. Jag trodde inte Firefox skulle ha webm stöd förrän i 4'an? Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad September 25, 2010 Författare Dela Postad September 25, 2010 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> Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad September 26, 2010 Författare Dela Postad September 26, 2010 Upptäckte nyss att WebM har lagts till som sökalternativ på YouTube. Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
JoWa Postad September 27, 2010 Författare Dela Postad September 27, 2010 Kunde inte låta bli att konvertera en video till WebM och lägga den i min Dropbox! 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 Citera Länk till kommentar Dela på andra webbplatser Fler delningsalternativ...
Recommended Posts
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.