如何快速轉發或倒帶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

兩件事情：

對於的jsfiddle，代碼已經被包裹在在window.onload，另一個在window.onload裏面的代碼並沒有真正執行。您應該刪除包裝（至少在使用JSFiddle時）。

其次，在setTimeout函數中，vid.currentTime = vid.currentTime + tdelta * j;不能按預期工作，因爲vid.currentTime的第二個實例不是一個恆定的開始時間。您應該分配setTimeout函數前的開始時間，並有vid.currentTime = startTime + tdelta * j;

這些變化，看看這裏：更新小提琴：https://jsfiddle.net/f90yu2t4/8/

來源

2016-04-19 23:51:50 Steve

謝謝！你認爲完全有可能使它快速前進，還是幾乎保證會發生波動？ –

它在我的電腦上運行得相當流暢，但你可能有更多的運氣改變video.playbackRate到較高的數字，直到你達到你的尋找時間（而不是改變currentTime）。這可能只適用於fastfowarding雖然 - 不知道它是否適用於負數倒帶。 – 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視頻到一定的時間點

回答

相關問題