Auto-appeler une fonction()

JeremieMeunier
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

Yop.

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

JeremieMeunier
Auteur

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

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')

JeremieMeunier
Auteur

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

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)
})