ビデオループを停止する方法は？

Question

ビデオタグで複数の動画を再生しています。すべて正常に動作します。

しかし、私はループを止めるためにビデオが必要です。現時点では、すべての動画が再生されると、動画が再び再生され、すべての動画が再び再生されます。

この問題を説明するために、次のコードを実行してください：

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>

を、必要であれば、これはFIDDLEです：http://jsfiddle.net/bnzqkpza/206/

誰かがこの問題についてアドバイスをしてくださいことはできますか？

ありがとうございます。

Answer 1

これを修正するには、onVideoEnded()の機能を修正する必要があります。現時点ではvideoSource配列の境界に到達したインデックスを検出し、代わりに0にインデックスをリセットして、あなたは、単にだけにロジックを反転する必要がないときは、配列の末尾に続け：

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

Answer 2

あなたの問題はこの行ですif (video_index > videoCount - 1) video_index = 0;

video_indexがビデオカウント（-1）より大きい場合、video_indexを別名0に戻しています。

あなたはこの

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

Answer 3

のようなものに変更することができますが、ビデオカウントは、それがループを作った理由ということに達した後も繰り返し映像ソースを割り当てています。私はちょうどこれらのステートメントを追加しました。

バグライン

if (video_index > videoCount - 1){ 

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

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

修正スニペット：

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>