如何将HTML5视频快进或快退到某个时间点

How to fast-forward or rewind an HTML5 video to a certain time point

本文关键字：时间 HTML5 视频      更新时间：2023-09-26

我正试图编写一些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);
}

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

HTML视频是否不够先进，无法支持视频中从一个地方到另一个地方的快速移动？

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

两件事：

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

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

有了这些更改，请在此处查看：更新的fiddle：https://jsfiddle.net/f90yu2t4/8/

相关文章：