2016-09-19 4 views
0

Ich versuche, ein Video anzuhalten und dann die Wiedergabe fortzusetzen. Aber ich nehme an, dass ich irgendwie die Pausenfunktion löschen muss? Ich habe versucht, Wiederholungen von myVideo.play() und ich kann es spielen, aber nur für kurze Bursts. Jede Hilfe wäre sehr willkommen.Videowiedergabe nach Pause in JavaScript/HTML5 fortsetzen?

<!DOCTYPE html> 
<html> 
<head> 
<title> Html5 Video Test </title> 
<meta charset="UTF-8"> 
</head> 

<body> < 
<div style="text-align:center"> 

    <button onclick="playPause()">Play/Pause</button> 

    <video id="video1" width="420" autoplay> 

    <source src="test.mov" type="video/mov"> 
    <source src="test.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
    </video> 
</div> 

<script> 


var myVideo = document.getElementById("video1"); 

myVideo.addEventListener("timeupdate", function(){ 
    if(this.currentTime >= 1 * 2) { 
     this.pause(); 
    } 
}); 

</script> 
</body> 
</html> 

Antwort

1

Wenn ich richtig verstehe, wollen Sie Ihre Event-Listener einmal nur Feuer (so wenn Sie das nächste das Video abspielen, es sofort nicht nur wieder angehalten werden). Wenn ja, geben Sie eine Einstellung:

var myVideo = document.getElementById("video1"); 

// Give this function a name so we can refer to it later. 
function pauseOnce() { 
    if (this.currentTime >= 1 * 2) { 
     this.pause(); 

     // Our work is done. Remove the event listener. (We need a reference to 
     // the function here.) 
     this.removeEventListener("timeupdate", pauseOnce); 
    } 
} 

myVideo.addEventListener("timeupdate", pauseOnce); 
+0

Vielen Dank für Ihre Hilfe, sehr nützlich. Ich werde das versuchen und sehen, wie es geht. Cheers J –

+0

Danke, nach ein bisschen fiedeln ich aha'd und erkannte, dass ich offensichtlich eine Funktion hinzufügen muss, die das Video wieder aufnimmt. Ich weiß, dass dies wahrscheinlich für viele offensichtlich ist, aber als ich auf eine Antwort gejagt habe, wie ich ein html5-Video pausieren/fortsetzen kann, füge ich hinzu, dass dies ein Follow-up-Kommentar ist. Fügen Sie nach dem obigen @smarx-Code die folgende Funktion mit einer zugeordneten HTML-Schaltfläche hinzu. 'Funktion fortsetzen() { vid.play(); } ' –