2

Control start position and duration of play in HTML5 videoの行に従って、それぞれの再生が終了したときに、ビデオをあるセグメントから次のセグメントに自動的にジャンプさせようとしています。各セグメントの継続時間は同じで、各セグメントの開始時間は配列になります。

addEventListenerの後に配列をループする方法がわかりません。

var video = document.getElementById('player1');


function settheVariables() {

var videoStartTime= ["4","15","26","39"];

for (var i = 0; i < videoStartTime.length; i++) {

if (video.currentTime < videoStartTime[0] ){
      video.currentTime = videoStartTime[i];
}
durationTime = 5;

}



//This part works when I plug in numbers for videoStartTime.

video.addEventListener('timeupdate', function() {

    if(this.currentTime > (// videoStartTime [current index] + durationTime)){

    this.currentTime = (// videoStartTime with next index);
    video.play();  }

});

}
4

1 に答える 1

2

配列の値を文字列ではなく整数に変更する必要があります-リンゴとリンゴを比較していません。

以下の更新されたやや簡略化されたサンプルは、(最初はビデオの開始から) タイムスタンプが現在のマーカーに 5 秒を加えた値に達するまで再生され、その後次のマーカーにジャンプします (そしてループバックします)。

ユーザーがビデオを自分でスクラブすることには対応していません (ただし、現在のセクションの開始から 5 秒を超えるとすぐにトラップされますが、戻ると少し混乱します) - これらの 5 秒以内に制御したい場合タイムスタンプと配列をよりスマートに調べて、本来あるべき場所にいることを確認する必要があります

とにかく...コード：

<script>
var video = document.getElementById('player1');

var videoStartTime= [4,15,26,39];
durationTime = 5;
currentIndex=0;

video.addEventListener('timeupdate', function() {
//  console.log(this.currentTime);

    if (this.currentTime > (videoStartTime[currentIndex] + durationTime))
    {
        currentIndex = (currentIndex + 1) % videoStartTime.length // this just loops us back around
    this.currentTime = videoStartTime[currentIndex];
//    video.play(); // don't need this if the video is already playing
 }

});

</script>
于 2013-05-10T02:59:50.393 に答える