0

ビデオの一部（html5）を再生し、2つのテキスト領域の「onclick」でそれらの部分をループしたいと思います。starttime（st）とendtime（et）をjavascript関数に渡します。

textarea1：st = 6 et = 12

textarea2：st = 15 et = 20

setintervalを使用して終了時刻を確認し、メソッドを再度呼び出してループしています。

シナリオ：textarea1をクリックします。st = 6 et=12。再生中にtextarea2をクリックします。条件video.currentTime>etは15>12として真であり、これは間違った結果です。et値は「onclick」で変更されません。助けてください。

これが私のコードです：

function playVideo(st,et) {
   var video = document.getElementById('player');
   video.currentTime = st;
   video.play();
   int = setInterval(function() {
      if (video.currentTime > et) { // here the et still has the previous value 
          playVideo(st,et); // loop             
      }
   }, 10);
}

<video width="320" height="240" controls="controls" id="player">
   <source src="abc.mp4" type="video/mp4" />
</video>
<textarea onclick="playVideo(6,12)" >Part1 </textarea>
<textarea onclick="playVideo(15,20)">Part2</textarea>
4

4 に答える 4

1

以前の値をet持っているということではなく、古い間隔を決して取り除かないということです。

再度呼び出す代わりに、 を呼び出すplayVideoだけの方がよいでしょうvideo.currentTime = st;。ただし、間隔を止めるものが必要になることに注意してください。個人的には、次のようにします。

function playVideo(st,et) {
    var video = document.getElementById('player');
    clearInterval(arguments.callee.interval);
    video.currentTime = st;
    video.play();
    arguments.callee.interval = setInterval(function() {
        if( video.currentTime > et) video.currentTime = st;
    },10);
}

間隔を関数のプロパティとして保存しています。これは本質的にJSの静的変数に相当します。このようにして、ユーザーが他のテキストエリアをクリックすると、既存の間隔がクリアされ、それ以上干渉されなくなります。

于 2012-08-20T16:39:17.197 に答える
0

clearInterval を使用して、古い間隔を取り除きます。

于 2012-08-20T16:39:03.577 に答える
0

問題は、インターバル コールバックをクリアしていないことにある可能性があります。以前の (まだアクティブな) 間隔を確認し、新しい間隔を割り当てる前にクリアしてみてください。

var videoEndInterval = null;
function playVideo(st, et) {
    ...

    if (videoEndInterval !== null) {
        clearInterval(videoEndInterval);
    }
    videoEndInterval = setInterval(function() {
        ...
    }, 10);
}
于 2012-08-20T16:39:51.770 に答える
0

あなたの「ループ」は現在、各間隔を新しい間隔で作成しており、間隔が混乱しています。setInterval は x ミリ秒ごとに実行されますが、setTimeout は x ミリ秒後に 1 回実行されます。ビデオを停止するときは、インターバルをクリアする必要があります。

これを試して：

// var declared outside, to clear an old interval,
// but also to not have a global variable.
var stopInterval; 

var playVideo = function (st, et) {
   var video = document.getElementById('player');
   video.currentTime = st;
   video.play();

   if (stopInterval) {
     // clear an old interval, if playVideo is called twice
     window.clearInterval(stopInterval);
     stopInterval = 0;
   }

   stopInterval = window.setInterval(function() {
      if (video.currentTime > et) {
          // here your video is after et, so clear the interval and stop.
          window.clearInterval(stopInterval);
          stopInterval = 0;
          video.pause();
      }
   }, 10);
};

また、ビデオがバッファリングされていないか、再生できず、一時停止されているか (間隔をクリアするため) もヒントにする必要があります。

HTMLVideoElement インターフェイス、HTMLMediaElement インターフェイス、 ビデオ HTML5 要素、および Mozilla の開発者ネットワークでHTML5 オーディオとビデオを使用するも参照してください 。

于 2012-08-20T16:55:08.917 に答える