如何将HTML5视频快进或快退到特定时间点

Question

如何将HTML5视频快进或快退到特定时间点

我正在尝试编写一些JavaScript来做到这一点，但我不知道为什么我的方法不起作用。

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);
}

Run Code Online (Sandbox Code Playgroud)

小提琴：https : //jsfiddle.net/f90yu2t4/1/

HTML视频是否还不够先进，不足以支持视频中这种从一处到另一处的快速移动？

Answer 1

Ste*_*eve 5

两件事情：

对于JSFiddle，代码已经包装在window.onload中，而另一个window.onload中的代码实际上并未执行。您应该删除包装器（至少在使用JSFiddle时）。

其次，在setTimeout函数中，vid.currentTime = vid.currentTime + tdelta * j;由于的第二个实例vid.currentTime不是恒定的开始时间，因此无法按预期工作。您应该在setTimeout函数之前分配一个startTime，并具有vid.currentTime = startTime + tdelta * j;

进行这些更改后，请在此处查看：更新的提琴：https : //jsfiddle.net/f90yu2t4/8/

Answer 2

小智 5

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	8785 次
最近记录：	8 年，5 月前