HTML5/Javascript <video> buffering?

[grumbkow]

Hallo daar,

Ik ben bezig met een HTML5 videospeler met volledig eigen controls hiervoor.
In principe heb ik alles werkend alleen loop ik tegen iets vreemds aan.

Ik heb een progressbar die toont hoe ver de video is met afspelen, en tegelijkertijd zit hier een andere balk achter die toont hoe ver de video is gebuffered.
Dit werkt in principe, maar zodra ik op de balk klik om de video op een ander punt af te spelen en ik log het bufferpercentage naar de console dan speelt de video wel af waar ik klik, maar het bufferen stopt.
Dus de video speelt wel af, maar hij buffered niet meer verder.

Ik test dit op een lokale server en als ik de video pauzeer is hij ook direct klaar met bufferen, misschien dat het hier door komt?
Hopelijk heeft iemand een antwoord =)

var startBuffer = function()
	{
		var maxDuration = video[0].duration;
		var currentBuffer = video[0].buffered.end(0);
		var bufferPercentage = currentBuffer / maxDuration;
		$('.bufferBar').css('width', progressBarMaxWidth * bufferPercentage);
		console.log(bufferPercentage);
	};
	video[0].addEventListener('progress', startBuffer, false);

 

[csshunter]

Hoi grumbkow,

... dan speelt de video wel af waar ik klik, maar het bufferen stopt.

Ik denk dat het bufferen wel gewoon doorgaat, maar dat alleen de buffer-bar niets meer laat zien.

In de start-functie wordt voor zover ik het kan bekijken, alleen éénmalig de style van de bufferbar getriggerd: op het moment van aanzetten. Daarna is de functie klaar: de width is op het aangegeven aantal px gebracht, en het % is naar de console geschreven > niets meer te doen.
De css is immers statisch, en doet niets uit zichzelf als het niet door javascript achter de vodden wordt gezeten.

Maar na de start zal de functie zich om de .. tijd moeten updaten met het nieuwe % buffer, dat dan in de bufferbar wordt gezet.
Ik denk dat met een setTimeout(startBuffer, 100) of een ander aantal millisec. de functie zichzelf moet herhalen, zolang aan de voorwaarde voldaan is dat het bufferPercentage <100%.
Blijven temperaturen zolang de patiënt koorts heeft!

• Misschien moet er ook nog een stopBufferBar-functie of -voorwaarde ingebouwd worden, die getriggerd wordt als de player wordt stilgezet.
  
  
• Iets dergelijks speelde bij een eigengebouwde "Twitterplayer" met achteruit-, play/pause- en vooruitknop: om van een standaard Twitterbox een carrousel te maken. Zie hier, op de bijbehorende meer-pagina, en in dit topic voor nog wat toelichting.

Met vriendelijke groet,
CSShunter

 

[grumbkow]

Hee csshunter, je bericht zou in intentie juist zijn, maar hij wordt niet eenmalig uitgevoerd.
Elke keer dat een video buffered, oftewel elke keer dat er meer van de video beschikbaar is wordt een een "progress" event afgevuurd.
Deze vang ik af met

video[0].addEventListener('progress', startBuffer, false);

welke de startBuffer functie aanroept. Dus elke keer dat er meer gebuffered is, wordt de bufferbar in breedte aangepast en wordt voorlopig het bufferPercentage naar de console geschreven.
Hierdoor kan ik afvangen of het bufferen door gaat ja of nee en het percentage blijft dan tot 10 decimalen achter de komma gewoon hetzelfde.
Hij houdt dus echt daadwerkelijk op met bufferen.

Aangezien dit op de localhost is en ik heb momenteel niet online kan testen vraag ik me dus af of het daar mee te maken heeft. De video is namelijk gewoon op mijn pc beschikbaar.

P.s. Ik hernoem startBuffer naar updateBuffer, is wat logischer


Aanvullend bericht:
Het is trouwens niet zo dat ik de javascript e.d. niet onder de knie heb, dit is kinderspel voor mij. Het is alleen het bufferen wat mij zorgen baart, alles is functioneel en de code is geheel werkend. Het zijn alleen de browsers die nu een vreemde zaak aantonen.