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.