Wie man die Videoschleife stoppt?

Question

Ich spiele mehrere Videos in einem Video-Tag. Alles funktioniert gut.

Allerdings brauche ich das Video, um die Schleife zu stoppen. Im Moment, wenn alle Videos abgespielt wurden, startet das Video erneut und es werden alle Videos erneut durchlaufen.

dieses Problem zu erklären, bitte den folgenden Code ausführen:

var videoSource = [ 
 
    "http://www.w3schools.com/html/mov_bbb.mp4", 
 
    "http://www.w3schools.com/html/movie.mp4", 
 
    "http://www.w3schools.com/html/movie.mp4" 
 
]; 
 

 

 
$('.playBtn').click(function(e) { 
 
    var videoCount = videoSource.length; 
 
    var video_index = 0; 
 

 
    function onload() { 
 
    videosToPlay = document.getElementById("videosToPlay"); 
 
    videosToPlay.addEventListener('ended', onVideoEnded, false); 
 
    videosToPlay.src = videoSource[video_index]; 
 
    videosToPlay.play(); 
 
    } 
 

 
    function onVideoEnded() { 
 
    video_index++; 
 
    
 
    if (video_index > videoCount - 1) video_index = 0; 
 
    videosToPlay.src = videoSource[video_index]; 
 
    videosToPlay.play(); 
 
    //alert('all the videos played'); 
 
    } 
 

 

 
    onload(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video src="" id="videosToPlay" width="320" height="240" controls style="background:black"> 
 
</video> 
 

 
<button class="playBtn"> 
 
Play Videos 
 
</button>

Und das ist ein FIDDLE erforderlich, wenn: http://jsfiddle.net/bnzqkpza/206/

Kann jemand bitte zu diesem Thema beraten?

Vielen Dank im Voraus.

Answer 1

Um dies zu beheben, müssen Sie die onVideoEnded() Funktion ändern. Im Moment erkennt er den Index die Grenzen des videoSource Array erreicht, und setzt den Index auf 0 Stattdessen müssen Sie einfach die Logik umkehren, um nur dann weiter, wenn sie nicht am Ende des Feldes:

function onVideoEnded() { 
    video_index++; 
    if (video_index < videoCount) {  
    videosToPlay.src = videoSource[video_index]; 
    videosToPlay.play(); 
    } 
} 

Answer 2

Ihr Problem ist diese Zeile if (video_index > videoCount - 1) video_index = 0;

Wenn die video_index ist größer als die Anzahl der Videos (-1) Sie zurücksetzen video_index zurück auf 0 aka den Anfang.

Sie können es wie diese

etwas ändern

if (video_index > videoCount - 1){ 
    alert("all the videos played"); 
    return; 
} 

Answer 3

Sie zuweisen Videoquelle wiederholt auch nach Videozählwert erreicht, warum es eine Schleife gemacht. Ich habe gerade diese Aussagen anderen Teil hinzugefügt.

Bug Linie

if (video_index > videoCount - 1){ 

      video_index = 0; 
      videosToPlay.src="#";// 

      } 
videosToPlay.src = videoSource[video_index];//reasigning after ended which causes loop 
     videosToPlay.play(); 

korrigiert Schnipsel:

var videoSource = [ 
 
    "http://www.w3schools.com/html/mov_bbb.mp4", 
 
    "http://www.w3schools.com/html/movie.mp4", 
 
    "http://www.w3schools.com/html/movie.mp4" 
 
]; 
 

 

 
$('.playBtn').click(function(e) { 
 
    var videoCount = videoSource.length; 
 
    var video_index = 0; 
 

 
    function onload() { 
 
    videosToPlay = document.getElementById("videosToPlay"); 
 
    videosToPlay.addEventListener('ended', onVideoEnded, true); 
 
    videosToPlay.src = videoSource[video_index]; 
 
    videosToPlay.play(); 
 
    } 
 

 
    function onVideoEnded() { 
 
    video_index++; 
 
    
 
     
 
    
 
    
 
    if (video_index > videoCount - 1){ 
 
    
 
     video_index = 0; 
 
     videosToPlay.src="#"; 
 
      
 
     } 
 
    else { 
 
    videosToPlay.src = videoSource[video_index]; 
 
    videosToPlay.play(); 
 
    //alert('all the videos played'); 
 
    } 
 
    } 
 

 

 
    onload(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video src="" id="videosToPlay" width="320" height="240" controls style="background:black" > 
 
</video> 
 

 
<button class="playBtn"> 
 
Play Videos 
 
</button>