Discussion :

[mdeniau]

Bonjour à tous,

Je développe un site web qui affiche entre autre une video. j'utilise la balise html5 <video> avec une barre de progression montrant l'avancement du chargement. Pour cela j'utilise les propriétés de la balise, notamment video.duration, video.buffered, et video.readyState pour gérer la progression.

Voici le code :

Code HTML :
(Je n'ai pas mis le CSS correspondant)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--bouton demarrage video visible, masqué ensuite parJS -->
<div id="demarrer" class="video-cta" >
	<svg id="lecture" class="playbutton" width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
		<circle id="playstroke" stroke="#FFFFFF" stroke-width="2" fill-opacity="0.2" fill="#000000"  cx="44" cy="44" r="42">
		</circle> 
		<polygon id="Triangle-1" fill="#FFFFFF"  transform="translate(47.000000, 43.000000) rotate(90.000000) translate(-47.000000, -43.000000) " points="47 29 61 57 33 57 ">
		</polygon> 
	</svg>
 
</div>
// le div 'player' est invisible, puis est affiché ensuite par JS.
<div id="player">
	<video id="mavideo" preload="metadata"  onprogress="precharge(event)" onmouseout="cacheboutons()" onmouseover="afficheboutons()"  >
		<source src="video/mavideo.mp4" type="video/mp4" />
		Votre navigateur ne supporte pas HTML5. Il est peut-être trop ancien.<br>
	</video>
 
</div>
<div id="progression">
	<div id="barre" ></div> //montre la progression
</div>

Code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script type="text/javascript">
var CtrlVideo = document.getElementById("mavideo");
var player = document.getElementById("player");
var	id= ""; 
var monwidth=0;
var elem = document.getElementById("barre");
 
function precharge(evt) {
	var monelem=evt.currentTarget;
	var charge= monelem.buffered.end(0);
	var avct=(charge/monelem.duration).toFixed(2);
	monwidth=avct*100;
	elem.style.width=(monwidth)+'%';
}
 
lecture.addEventListener("click", chargervideo, false); 
 
function chargervideo() {
	CtrlVideo.load();
	progression.style.display="block";	//la barre de progression est montrée
	elem.style.display='block';
	if(CtrlVideo.readyState < 4)
	{
		monwidth=0;
		elem.style.width=0;
		while (monwidth < 100)
		{
			// on attend que Precharge remplisse la barre à 100% 
		}
 	}
	LectureVideo(); // lance la lecture de la video...
 
 
}
function LectureVideo(){
	player.style.display="block";  // le player est affiché.
	var evt = document.createEvent("MouseEvents");
	evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
	document.getElementById("play").dispatchEvent(evt);
 
	}
</script>

Au premier lancement, le calcul de l'avancement de la barre ne fonctionne pas. Je dois faire une erreur quelque part, mais je ne trouve pas...
Au second, comme la propriété readyState = 4, la vidéo est jouée .

Merci d'avance de votre aide.

[01001111]

Bonjour,

Oulala ! pas très propre ce code.

Il semble que tu confonds deux choses :
la progression de la lecture qui se fait via l'évènement onprogress
et la progression du chargement qui se fait via l'évènement onloadprogress

commence par remplacer onprogress par onloadprogress pour ta fonction precharge, elle se comportera mieux.

secundo, il est plutôt dangereux en javascript de faire une boucle while avec rien dedans, j'ai copié ton code et mon navigateur a planté sur la page. À moins d'être sûr à tous les coups que la condition de sortie de la boucle sera remplie très rapidement.
si tu veux temporiser des choses sur une video, pas besoin de while, pas besoin non plus de setTimeout, tu as tout avec les évènements.

En gros, si tu veux bien faire, utilise:
onprogress pour calculer le déroulement de la lecture
onloadprogress pour le déroulement du chargement
oncanplaythrough, la propriété autoplay (ou encore oncanplay) pour lancer la video dès que le chargement est suffisant pour le faire
etc

puis je ne vois pas pourquoi un dispatchEvent alors que tu as la fonction play() sur l'élément video

une liste de évènements ici:
https://www.w3.org/2010/05/video/mediaevents.html
ou ici
https://developer.mozilla.org/fr/doc...s/Media_events

bon courage, ciao

[mdeniau]

Merci pour ton aide 01001111
,
C'est vrai mon code n'est pas terrible. J'ai essayé tellement de choses qu'il est devenu.. disons incohérent.
Je vais essayé tes pistes, et je donnerai les résultats.
Merci encore de tes conseils.