完全なHTML5ビデオを再生してその一部をループします

Question

私は8.6秒のビデオを一度完全に再生し、ビデオの小さな部分を無限にループして、終わりのないビデオの錯覚を維持しようとしています。これまでのところ、media fragments URIと、ビデオのendedイベントを調べました。終了したイベントリスナーでcurrentTime属性を設定すると、ビデオは "点滅"します。現時点では

、私はビデオは終わりに近づいている時間を変更するtimeupdateイベントリスナーを使用しています[以下に示し]

elem.addEventListener('timeupdate', function() { 
if (elem.currentTime >= 8.5) { 
    elem.currentTime = 5; 
    elem.play(); 
} 
}, false); 

JSFiddle hereは

これは、同様に動作しますが、ビデオは5秒後に再起動する前に視覚的に一時停止します。一度ビデオを再生してから、そのセグメントをループさせるスムーズな方法はありますか？

Answer 1

とすぐにそれが終わると、それを「巻き戻し」に、次のことを試してみてください。

vidElem.addEventListener("ended", function() { 
     vidElem.currentTime = 2.5; 
     vidElem.play(); 
}, false); 

更新フィドル：http://jsfiddle.net/Lt4n7/1/

Answer 2

を私はちょうど同じ問題に対処しなければならなかったし、ちらつきと同じ問題に気づきました。ここに私の解決策だった：

• 2つのビデオ（またはビデオのセット）を取得 - にループの要素を設定する非ループセクションのための1つを、
• ループした部分について、他の2つのビデオ要素
• を作成します。 「表示：なし」

それからちょうど例はjqueryのを使用していますが、同じように簡単に「style.display = 『なし/ブロック』」を使用することができます（エンドイベントとスワップ表示状態をキャプチャ：

VideoPlayer1 = document.getElementById('video1'); 
VideoPlayer2 = document.getElementById('video2'); 
VideoPlayer1.addEventListener('ended', videoLooper, false); 

function videoLooper() 
{ 
    VideoPlayer2.play(); 
    $(VideoPlayer2).show(); 
    $(VideoPlayer1).hide(); 
} 

Answer 3

あなたのコードは問題ありません、問題はあなたのMP4ファイルです！このような小さなビデオ（http://www.w3schools.com/tags/movie.mp4）を使用して、コードに問題がないことを確認してください。

どのように大きな動画ファイルで同じ結果を達成できますか？あなたは、2つのビデオファイルが必要になります ：

• ビデオ1は、メインビデオ
• VIDEO2あるループ映像

を覚えておいてくださいされています。私たちが使用しますので、HTML5ビデオには何の問題大きなビデオファイルを再生したり、ループを持っていませんこのメソッドは、ビデオを再生する。

以下の例では最初のビデオを再生し、終了するとビデオ1を非表示にしてからビデオ2を表示/再生する機能を実行します。 （ビデオ2はすでにループに設定されています）

頭にJQueryをロードするのを忘れないでください。そうしないと、動作しません。

<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()"> 
    <source src="movie.webm" type="video/webm"> 
    <source src="movie.ogg" type="video/ogg"> 
    <source src="movie.mp4" type="video/mp4"> 
    <object data="movie.mp4" width="1080" height="568"> 
    <embed width="1080" height="568" src="movie.swf"> 
    </object> 
Optional test to be displayed if the browser doesn't support the video tag (HTML 5) 
</video> 


<video id="video2" width="1080" height="568" poster="loop.png" loop> 
    <source src="loop.webm" type="video/webm"> 
    <source src="loop.ogg" type="video/ogg"> 
    <source src="loop.mp4" type="video/mp4"> 
    <object data="loop.mp4" width="1080" height="568"> 
    <embed width="1080" height="568" src="loop.swf"> 
    </object> 
Optional test to be displayed if the browser doesn't support the video tag (HTML 5) 
</video> 


<script> 
$("#video2").hide(); 
function run(){ 
    $("#video1").hide(); 
    $("#video2").show(); 
    document.getElementById("video2").play(); 
    }; 
</script> 

Answer 4

JavaScriptでこの問題を解決することはできません。その遅延はビデオ圧縮とハードウェアによって異なります。

0以外の時間に再生を開始するには、ビデオデコーダが戻ってkey frameを見つけて、最後のキーフレームと選択した時刻の間のすべてを読み取って現在のフレームを構築する必要があります。

私はビデオ圧縮の専門家ではありませんが、これらのキーフレームを選択し、必要な場所に正確に配置する方法があります。私はそれが簡単で滑らかになるとは思わない。

---

あなたは簡単に解決策を探しているなら、@Random'sを使用していますが、それはこの制限を回避するために、2個の<video>のタグを使用しています。

Answer 5

var iterations = 1; 
 
var flag = false; 
 
document.getElementById('iteration').innerText = iterations; 
 
var myVideo = document.getElementById('video-background'); 
 
myVideo.addEventListener('ended', function() { 
 
    alert('end'); 
 
    if (iterations < 
 
    2) { 
 
    this.currentTime = 0; 
 
    this.play(); 
 
    iterations++; 
 
    document.getElementById('iteration').innerText = i terations; 
 
    } else { 
 
    flag = t rue; 
 
    this.play(); 
 
    } 
 
}, false); 
 
myVideo.addEventListener('timeupdate', function() { 
 
    if (flag == t rue) { 
 
    console.log(this.currentTime); 
 
    if (this.currentTime > 
 
     5.5) { 
 
     console.log(this.currentTime); 
 
     this.pause(); 
 
    } 
 
    } 
 
}, false);

<div>Iteration: <span id="iteration"></span></div> 
 

 
<video id="video-background" autoplay="" muted="" controls> 
 
      <source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4"> 
 
    </video> 
 
<div>Iteration: <span id="iteration"></span></div>

//そのループ属性がIEで動作するように「終了」イベントのために映像の要素であってはならない注意とFirefox