Auto-appeler une fonction()

Par Jeremie, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Ce code permet à mon lecteur vidéo de fonctionner en donnant la taille à deux DIV et en indiquant le temps dans deux P

Pour le moment, avec ce code j'ai ce qu'il "faut" enfin presque car il faudrait qua la fonction s'auto-appele pour que les taille, et temps soit remis à "jour" automatiquement.

function playedF(){ var duration = video.duration; var played = video.played.end(0); var buffered = video.buffered.end(0); var playedM = played/60; var playedM = parseInt(playedM, 10); var playedS = played-(60*playedM); var playedS = parseInt(playedS, 10); var playedW = (played/duration)*100; var playedW = parseInt(playedW, 10); var bufferedW = (buffered/duration)*100; var bufferedW = parseInt(bufferedW, 10); redDiv.style.width = playedW + "%"; blackDiv.style.width = bufferedW + "%"; var durationM = duration/60; var durationM = parseInt(durationM, 10); var durationS = duration-(60*durationM); var durationS = parseInt(durationS, 10); if(durationM < 0) { stime.innerHTML = "00:" + duration; } else { if(durationS < 10) { var durationS = "0" + durationS; } stime.innerHTML = durationM + ":" + durationS; } if(playedM < 0) { time.innerHTML = "00:" + duration; } else { if(playedS < 10) { var playedS = "0" + playedS; } if(playedM < 10) { var playedM = "0" + playedM; } time.innerHTML = playedM + ":" + playedS; } }

Ce que je veux

J'aimerais que le rafraichissement soit automatique.

Ce que j'obtiens

Pour le moment, le temps s'affiche seulement si je clique sur un élément...

<div class="b-video__time" id="time" onclick="playedF()">00:00</div>

5 réponses

PhiSyX, il y a 9 ans

Yop.

Greffe l'événement timeupdate à ton élément html <video /> ??

Jeremie, il y a 9 ans

Merci ais je ne pense pas que ça fonctionne, je n'ai pas donner ma structure HTML

<section class="b-video__container video__paused" id="player"> <div class="b-video__content"> <video preload="metadata" class="b-video" id="video"> <source src="/bplay/libs/upload/video/baby-and-me.mp4" type="video/mp4"></source> </video> <div class="b-video__action"> <div class="b-video__command"> <div class="b-video__timer"> <div class="b-video__burffed" id="blackDiv" style="width: 0%"></div> <div class="b-video__played" id="redDiv" style="width: 0%"></div> <div class="b-video__time" id="time" onclick="playedF()">00:00</div> <div class="b-video__stime" id="stime">00:00</div> </div> <a href="##" class="b-video__middleCommand play" id="play"><i class="material-icons">play_arrow</i></a> <a href="##" class="b-video__middleCommand pause" id="pause"><i class="material-icons">pause</i></a> </div> <div class="b-video__infos"> <img src="/bplay/libs/upload/img/couv-foufou-laurie-zizi.png" alt="" class="b-video__image" /><!-- --><aside class="b-video__texte"> <p class="b-video__phrase">Vous regardez :</p> <h2 class="b-video__title">Les foufous chez Laurie</h2> <p class="b-video__paragraphe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet elit eget nisl semper scelerisque sed id libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat eros sit amet nunc porttitor venenatis. Vestibulum feugiat neque sem, ac convallis sapien facilisis eu. Praesent egestas cursus orci, non porta lorem blandit id.</p> </aside> </div> </div> </div> </section>
PhiSyX, il y a 9 ans

Pourquoi ça ne fonctionnerait pas en fait? :-S
L'événement timeupdate est déclenché lorsque le temps indiqué par l'attribut currentTime est mis à jour. (Source MDN)

J'avais compris la structure.
video.addEventListener('timeupdate', playedF) si video = document.querySelector('#video')

Jeremie, il y a 9 ans

Bien merci ça fonctionne mais j'ai toujours un problème ! Il faut que je lance la vidéo pour qu'il m'affiche le temps qu'elle dure !

PhiSyX, il y a 9 ans

Vu que tu utilises l'attribut preload avec metadata comme valeur, il te suffit d'écouter l'événement loadedmetadata et de récupérer sa durée avec $event.target.duration ;-)

video.addEventListener('loadedmetadata', function (e) { console.log('Durée:', e.target.duration) })