web-dev-qa-db-de.com

Ausgabeeinstellung currentTime in HTML5-Video

Ich habe ein Video in der Mitte meiner HTML-Datei. Wie Sie zuerst sehen können, habe ich keine Quelle

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

Wenn ich auf eine Schaltfläche klicke, löse ich eine Funktion aus:

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

Das Video wird korrekt abgespielt, aber ich kann nicht die aktuelle Uhrzeit einstellen (und ich habe das gleiche gemacht, wie wir es in http://www.w3schools.com/tags/av_prop_currenttime.asp sehen können).

Es gibt den gleichen Fehler, wenn ich die currentTime vor dem Aufruf der Abspielfunktion einstelle.

Der Fehler, der in der Konsole angezeigt wird, lautet wie folgt: "Nicht erfasstes InvalidStateError: Es wurde versucht, ein Objekt zu verwenden, das nicht oder nicht mehr verwendbar ist." (in der currentTime-Zeile), aber wenn ich dieses Problem suche, kann ich mich nicht mit Video verbinden, sondern nur mit der Leinwand.

Danke im Voraus

12
Yises

Sie müssen nicht warten, bis das Spiel beginnt, aber es muss spielbereit sein. Dazu gibt es das canplay -Ereignis, also sollte so etwas funktionieren:

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

Wie oben erwähnt, versuchen Sie, currentTime einzustellen, wenn das Video nicht gesucht werden kann. Als alternativer Anwendungsfall (Zeit auf 0 zurücksetzen, wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt), können Sie Folgendes tun:

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

Alternativ können Sie auch versuchen, nur zurückzusetzen, wenn das Video zuvor abgespielt wurde.

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