Jeu avec l'élément video et JavaScript

Thomas · Message par **Thomas** » 08 août 2008, 09:28

Bonjour,

Je m'initie à JavaScript grâce à <video ...>.

Voici la page actuelle :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Video Demo</title>
	<meta name="author" content="Thomas">
	<style type="text/css">
		#controls {
			background: #f00;
		}
	</style>
</head>
<body>
<video id="video" src="big_buck_bunny.ogg" poster="bbb-splash.png" onprogress="updateTime();">Pouet</video>
<script>
  var video = document.getElementById("video");
  var togglePlay = function() {
		if( document.getElementById("toggle").innerHTML == "Pause" ) {
			document.getElementById("toggle").innerHTML = "Play";
			video.pause();
		} else {
			document.getElementById("toggle").innerHTML = "Pause";
			video.play();
		};
  };
  var toggleMute = function() {
		if( document.getElementById("mute").innerHTML == "Mute" ) {
			document.getElementById("mute").innerHTML = "Unmute";
			video.muted = true;
		} else {
			document.getElementById("mute").innerHTML = "Mute";
			video.muted = false;
		};
  };
  var updateTime = function() {
	  document.getElementById("timeplayed").innerHTML = document.getElementById("video").currentTime;
  };
</script> 
<div id="controls">
<button type="button" onclick="togglePlay();" id="toggle" />Play</button>
<button type="button" onclick="video.stop();" id="stop" />Stop</button>
<button type="button" onclick="video.currentTime=0;" id="min" />Stop2</button>
Time : <span id="timeplayed">0.0</span>
<button type="button" onclick="toggleMute();" id="mute" />Mute</button>
</div>
</body>
</html>

Play/Pause et Mute/Unmute marchent niquel.

Pour stop, j'ai essayé deux méthodes. La première (.stop()) fonctionne dans Opera mais pas Minefield. d'un autre côté je ne la trouve pas dans la spec : http://www.w3.org/TR/html5/video.html#video Mais peut-être que je lis mal, je n'arrive pas à trouver une liste exhaustive des fonctions et attributs de l'élement video :/ Y-a-t-il un autre moyen (dom inspector ?). Pour la deuxième (.currentTime=0) Minefield me alnce une exception "not implemented" donc je vais attendre.

Puis enfin il y a cette histoire de timePlayed, je ne voit pas ce qui cloche

Si jamais quelqu'un m'éclairer

Merci d'avance !

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1a2pre) Gecko/2008080702 Minefield/3.1a2pre

teoli2003 · Message par **teoli2003** » 08 août 2008, 09:46

Cela peut t'aider: https://bugzilla.mozilla.org/show_bug.cgi?id=449282 Les "Depends" et "Block" sont intéressants pour retrouver les autres bugs sur <video>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Thomas · Message par **Thomas** » 08 août 2008, 10:30

J'ai trouvé plusieurs bugs intéressants à suivre en effet

En gros rien n'est encore implémenté concernant ce qui est "durée". Comme on "s'abonne" à un bug ?

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1

calimo · Message par **calimo** » 08 août 2008, 11:27

Soit en CC, soit en votant si ça a un impact sur toi (je crois qu'il faut être enregistré pour avoir le lien "(vote)")

Thomas · Message par **Thomas** » 08 août 2008, 12:53

J'ai voté pour chacun des bugs

Mon player commence a avoir du style mais en fait il manque encore beaucoup de choses à implémenter. Impossible d'avoir la taille de la vidéo, sa durée totale, la durée à laquelle on en est, etc. :p Heureusement c'est considéré comme urgent de l'avoir pour la beta1 prévue pour le 19 aout (lu dans les commentaires).

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1

Thomas · Message par **Thomas** » 08 août 2008, 17:45

J'ai un problème de perfs ^^. J'aimerai afficher l'état de chargement de la vidéo. Pour ça j'ai fait un while comme suit :

Code : Tout sélectionner

	while( document.getElementById("video").networkState != 4 ) {
		switch (document.getElementById("video").networkState) {
			case 0:
			document.getElementById("moukmouk").innerHTML = "EMPTY";
			break;
			case 1:
			document.getElementById("moukmouk").innerHTML = "LOADING";
			break;
			case 2:
			document.getElementById("moukmouk").innerHTML = "LOADED_METADATA";
			break;
			case 4:
			document.getElementById("moukmouk").innerHTML = "LOADED_FIRST_FRAME";
			break;
			case 3:
			document.getElementById("moukmouk").innerHTML = "LOADED";
			break;
			default: 
			document.getElementById("moukmouk").innerHTML = "ERROR";
			break;
		}
	};

document.getElementById("video") c'est ma vidéo, networkState c'est l'état que je cherche. moukmouk c'est l'id du span dans lequel j'affiche l'état récupéré.

Problème : ce while bouffe toute les ressources, il y a un meilleur moyen de faire ? Ou un moyen de le ralentir ?

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1

calimo · Message par **calimo** » 09 août 2008, 08:43

Par exemple mettre un petit sleep de qqs millisecondes à la fin de ta boucle ? Si c'est rafraichi 10 fois par secondes, ça semble suffisant...

(Cela dit, je pense qu'il doit (ou en tous cas devrait) y avoir un évènement provoqué par le changement d'état...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

Geckozone

Jeu avec l'élément video et JavaScript

Jeu avec l'élément video et JavaScript

Qui est en ligne ?