HTML5ビデオを特定の時点まで早送りまたは巻き戻す方法

これを行うためにJavaScriptを作成しようとしていますが、私の方法がうまくいかない理由がわかりません。HTML5ビデオを特定の時点まで早送りまたは巻き戻す方法

var vid = document.getElementById('myvid'), 
    ticks = 50, // number of frames during fast-forward 
    frms = 10, // number of milleseconds between frames in fast-forward/rewind 
    endtime = 24.0; // time to fast-forward/remind to (in seconds) 

// fast-forward/rewind video to end time 
var tdelta = (endtime - vid.currentTime)/ticks; 
for (var i = 0; i < ticks; ++i) 
{ 
    (function(j){ 
     setTimeout(function() { 
      vid.currentTime = vid.currentTime + tdelta * j; 
     }, j * frms); 
    })(i); 
}

フィドル：https://jsfiddle.net/f90yu2t4/1/

HTMLビデオはビデオで場所から場所への迅速な動きのこの種をサポートするのに十分なだけ進んでいませんか？

出典

2016-04-19 Subpar Web Dev

2つのこと：JSFiddleについては

は、コードがすでにwindow.onloadに包まれて、別のwindow.onload内のコードは実際には実行されません。ラッパーを削除する必要があります（少なくともJSFiddleを使用する場合は）。

第2に、vid.currentTimeの2番目のインスタンスが一定の開始時間ではないため、は、意図したとおりに機能しません。あなたは、setTimeout関数の前のstartTimeを割り当て、それらの変更によりvid.currentTime = startTime + tdelta * j;

を持って、ここでそれをチェックアウトする必要があります：更新フィドル：https://jsfiddle.net/f90yu2t4/8/

出典

2016-04-19 23:51:50 Steve

感謝を！あなたはそれをスムーズな早送りにすることが可能であると思いますか、それともかなり不安定になることはほとんどありませんか？ –

私のコンピュータではかなりスムーズに動いていますが、seektime（currentTimeを変更する代わりに）に達するまで、video.playbackRateを高い数値に変更すると運が増える可能性があります。それは巻き戻しのために負の数で動作するかどうか確信していますが、早送りにしか使えないかもしれません。 – Steve

ビデオを探して再生するときにビデオを一時停止してから再生することも有益でしょう。 – Steve

<script type="text/javascript"> 

    function vidplay() { 
     var video = document.getElementById("Video1"); 
     var button = document.getElementById("play"); 
     if (video.paused) { 
      video.play(); 
      button.textContent = "||"; 
     } else { 
      video.pause(); 
      button.textContent = ">"; 
     } 
    } 

    function restart() { 
     var video = document.getElementById("Video1"); 
     video.currentTime = 0; 
    } 

    function skip(value) { 
     var video = document.getElementById("Video1"); 
     video.currentTime += value; 
    }  
</script> 


<body>   

<video id="Video1" > 
// Replace these with your own video files. 
    <source src="demo.mp4" type="video/mp4" /> 
    <source src="demo.ogv" type="video/ogg" /> 
    HTML5 Video is required for this example. 
    <a href="demo.mp4">Download the video</a> file. 
</video> 

<div id="buttonbar"> 
    <button id="restart" onclick="restart();">[]</button> 
    <button id="rew" onclick="skip(-10)">&lt;&lt;</button> 
    <button id="play" onclick="vidplay()">&gt;</button> 
    <button id="fastFwd" onclick="skip(10)">&gt;&gt;</button> 
</div>   
</body>

出典

2017-06-23 12:37:53

HTML5ビデオを特定の時点まで早送りまたは巻き戻す方法

答えて

関連する問題