Balise vidéo html5, gérer la progressbar
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:
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:
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.
