文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将HTML5视频快进或倒带到某个时间点

问如何将HTML5视频快进或倒带到某个时间点
EN

Stack Overflow用户

提问于 2016-04-20 07:29:28

回答 2查看 18K关注 0票数 6

我正试着写一些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视频是否还不够先进，不足以支持视频中这种从一个地方到另一个地方的快速移动？

video

javascript

html

回答 2

Stack Overflow用户

发布于 2017-06-23 20:37:54

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

票数 6

Stack Overflow用户

发布于 2016-04-20 07:51:50

两件事：

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

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

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36731230

复制

相似问题

问如何将HTML5视频快进或倒带到某个时间点
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将HTML5视频快进或倒带到某个时间点EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将HTML5视频快进或倒带到某个时间点
EN