WN - Audio/video i HTML 5

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Audio/video i HTML 5 (https://www.wn.se/forum/showthread.php?t=37684)

Sitter med nya audio-taggen på min mediasajt, skönt som fan att slippa oroa sig för flashversioner och att användare har flash installerat, dock undrar jag om någon har koll på playback via javascript? Att skapa en kontroll för att spela och pausa filen är inga problem,

Kod:

<script>function playPaus() {var v = document.getElementsByTagName("audio")[0];v.play();}</script>

Dock har jag fastnat lite när det gäller att avgöra om filen redan spelas eller ej, någon som har koll på addEventListener?

Kod:

<script>



var v = document.getElementsByTagName("audio")[0];

int playing=0;

v.addEventListener("play", function() { playing=1; } else { playing=0; }, true);





function hej() {



if(playing ==1) {

v.paus();

// kod för att ändra andra grejer

}else{

v.play();

// kod för att ändra andra grejer

}

}



</script>



<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" controls> 

Your browser does not support the <code>audio</code> element. This future should NOT be used for Internet Explorer!

</audio> 

<a href="javascript:hej();">Play/pause</a>

@KarlRoos, det ser helt rätt ut. Får det inte att funka i Firefox men jag ska trixa vidare och kanske löser det sig! Tack för tipset...

Återkommer om det blir ytterligare komplikationer... ;)

Kul att folk vågar prova ny teknik! Du kör Firefox 3.5 eller? Här finns ganska bra dokumentation:

https://developer.mozilla.org/en/Using_audi...ideo_in_Firefox

Jag tror inte det finns stöd för <video> i tidigare versioner av Firefox? I IE är ju stödet dessutom obefintligt, så även om jag använder mig av <audio> och <video> så ser jag till att ha en flash fallback, men utvecklingen går framåt :)

Tjena stakes, älskar ny teknik, om jag lade ner lika mycket tid på att uppdatera och marknadsföra mina hemsidor som att leka med ny teknik hade jag nog varit rik vid det här laget. Men hur kul är det? :)

Aja, så typiskt, man sitter timmar med nya teknik för att förstå varför det inte funkar, sedan visar det sig, som vanligt, att man gjort ett slarvfel. Är viss skillnad mellan v.paus(); och v.pause();... :-p

Såhär ser det ut live om någon vill kika på koden: My Webpage

stakes, använder du audio/video live på någon site? Överväger browser-sniffing framför att köra flash som fallback, är lite orolig för att flash-fallbacken inte ska laddas i någon version av IE eller liknande, obefogad oro?

Kan passa på att ställa en relaterad fråga, någon som faktiskt vet vilka webbläsare som stödjer audio/video i html 5? Gecko, webkit och presto har jag läst, men gäller det enbart firefox, safari och opera eller fler baserade webbläsare? Hur ser stöd för olika codecs och format ut mellan webbläsarna och olika operativsystem? Någon som känner till en bra sammanfattning?

Det här kanske hjälper:

Citat:

The goal was for there to be at least one standard video codec that would work across all HTML 5 browsers — one format that would work across browsers and platforms with no plugins.

But, alas, the result is an impasse. Apple won’t support Ogg Theora, and Mozilla and Opera won’t support H.264. (Google, admirably, is willing to support both in Chrome, but they don’t consider Ogg good enough to use for YouTube.) So there will be no standard HTML 5 video codec. So it goes.

http://lists.whatwg.org/htdig.cgi/whatwg-w...une/020620.html

Citat:

Originally posted by pontus@Jul 5 2009, 00:38
Kan passa på att ställa en relaterad fråga, någon som faktiskt vet vilka webbläsare som stödjer audio/video i html 5? Gecko, webkit och presto har jag läst, men gäller det enbart firefox, safari och opera eller fler baserade webbläsare? Hur ser stöd för olika codecs och format ut mellan webbläsarna och olika operativsystem? Någon som känner till en bra sammanfattning?

Har för mig att jag läste på Operas desktop team blog att det inte kommer att finnas stöd för <video> när Opera 10 släpps. Troligen skulle det komma i en senare version men alltså inte i 10.00:an.

Citat:

Wikipedia har en del...
http://en.wikipedia.org/wiki/Comparison%5F...F%28HTML%5F5%29

Sedan lite mer om video taggen och codecs...
http://stream0.org/2009/06/html-5-codecs-a...e-video-ta.html

Hej alla, tack för alla länktips. Jag har fått lite mer kunskap om ämnet!

Jag ska lägga upp .ogg live på mina sajter senare idag, vi får se hur det går. Tänkte dela med mig av koden jag använder. Om du litar på att alla webbläsare klarar av att hantera flash som fallback på ett audio-dokument, att användarens webbläsare har javascript-aktiverat om du använder javascript kontroller för att hantera ljudet och inte har något emot några extra rader kod kan du BORTSE från koden nedan. Denna kod skriver över flash-spelaren med ogg ENBART om användaren kör FF 3.5 och har Javascript aktiverat:

Kod:

<html><head>

<?

$ua="Firefox/3.5";

if(strpos($_SERVER['HTTP_USER_AGENT'],$ua)) { ?>

<style>

a:link {border: 0px; color: #ffffff;}

</style>

<script language="JavaScript" type="text/javascript">



function fixReplace() {

document.getElementById("playbutton").innerHTML='<a href="javascript:pausPlay()"><img src="http://www.plopmusic.com/play/buttons/custom/bPlay.png" id="playButton" border="0"></a>';

}



function pausPlay() {

var v = document.getElementsByTagName("audio")[0];

 if(v.paused) {

 v.play();

document.getElementById("playButton").src="http://www.plopmusic.com/play/buttons/custom/bPaus.png";





 }else{

 v.pause();

document.getElementById("playButton").src="http://www.plopmusic.com/play/buttons/custom/bPlay.png";



 }





}

document.getElementsByTagName("audio")[0].addEventListener('ended', function () { alert('video playback finished') } );



</script>

<? } ?>

</head>

<body onload="fixReplace();">

<? if(strpos($_SERVER['HTTP_USER_AGENT'],$ua)) { ?>

<audio src="http://www.plopmusic.com/m/mp3/pontus.ogg" type="audio/ogg" > 

Your browser does not support the <code>audio</code> element. This future should NOT be used for Internet Explorer!

</audio> 

<? } ?>



<div id="playbutton">

// Kod för flashspelaren!

</div>

</body></html>

Kan givetvis göras MYCKET snyggare. Men det funkar och ni förstår nog tanken! :ph34r: