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 :
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...
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 second, comme la propriété readyState = 4, la vidéo est jouée .
Merci d'avance de votre aide.
Partager