web-dev-qa-db-fra.com

Problème définissant currentTime dans la vidéo HTML5

J'ai une vidéo au milieu de mon HTML. Comme vous pouvez le voir au début, je n'ai aucune source

<video id="videoPrincipal" src="" width="640" height="360" controls preload></video>

Lorsque je clique sur un bouton, je déclenche une fonction qui permet:

myVid = document.getElementById('videoPrincipal');
myVid.src = 'video.mp4';
myVid.play();
myVid.currentTime ='5';

La lecture de la vidéo commence correctement, mais je ne peux pas régler l’heure actuelle (et j’ai fait ce que nous pouvons voir dans http://www.w3schools.com/tags/av_prop_currenttime.asp )

Cela me donne la même erreur si je définis le currentTime avant d'appeler la fonction play.

L'erreur qui s'affiche dans la console est la suivante: "InvalidStateError non capturé: une tentative d'utilisation d'un objet qui n'est pas ou n'est plus utilisable a été effectuée." (dans la ligne currentTime) mais lorsque je recherche ce problème, je ne peux pas associer à la vidéo, uniquement à la toile.

Merci d'avance

javascripthtml5videohtml5-video
12
Yises

Vous n'avez pas à attendre que le jeu commence, mais il doit être prêt à jouer. Il y a le canplay événement pour le faire, donc quelque chose comme ça devrait marcher:

myVid.play();
myVid.addEventListener('canplay', function() {
    this.currentTime = 5;
});
23
Dan Goodspeed

Comme mentionné ci-dessus, vous essayez de définir currentTime lorsque la vidéo ne peut pas être recherchée. Donc, comme cas d'utilisation alternatif (réinitialiser le temps à 0 lorsqu'un utilisateur clique sur un bouton, par exemple), vous pouvez faire quelque chose comme:

function resetVideo() {
  myVid.pause();
   
  if ( video.seekable.length > 0 ) {
    myVid.currentTime = 0;
  }
}

Sinon, vous pouvez également essayer de réinitialiser uniquement si la vidéo a déjà été lue.

function resetVideo() {
  myVid.pause();
   
  if ( video.currentTime !== 0 ) {
    myVid.currentTime = 0;
  }
}

2
bhongy
video = document.getElementById('video');
begin_play  = 50;
play_video_first = true; //if you want to run only first time    
video.addEventListener("play", capture, false);

function capture(event) 
{
     if (event.type == "play"){
         if(play_video_first){
             play_video_first = false;
             video.currentTime = begin_play;
          }
     }
}
0
rut