53

html5 video是否可以搜索到网页中显示的特定点？我的意思是，我可以输入一个特定的时间值（比如说01:20:30:045）并让玩家控制（滑块）移动到那个点并从那个点开始播放吗？

在旧版本的 mozilla 中，vlcplugin我认为这可以通过方法实现。seek(seconds,is_relative)但我想知道这在 html 视频中是否可行。

编辑：

我用视频创建了页面并添加了如下的javascript。当我点击链接时，它会显示点击时间..但它不会增加播放位置..但会继续正常播放。

视频播放位置不应该改变吗？

html

<video id="vid" width="640" height="360" controls>
       <source src="/myvid/test.mp4" type="video/mp4" /> 
</video>
<a id="gettime" href="#">time</a>
<p>
you clicked at:<span id="showtime"> </span> 
</p>

javascript

$(document).ready(function(){
    var player = $('#vid').get(0);
    $('#gettime').click(function(){
            if(player){
                current_time=player.currentTime;
                $('#showtime').html(current_time+" seconds");
                player.currentTime=current_time+10;
            }
        });
}
);
4

3 回答 3

70

您可以使用v.currentTime = seconds;来寻找给定的位置。

参考：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

于 2012-05-05T12:09:37.260 回答
7

不幸的是，某些电影元素的行为似乎与其他元素不同。例如，对于亚马逊 video_element，您似乎必须先调用 pause，然后才能在任何地方搜索，然后再调用 play。但是，如果您在设置后调用“播放太快”，currentTime则它不会粘住。奇怪的。

这是我目前的工作：

function seekToTime(ts) {
  // try and avoid pauses after seeking
  video_element.pause();
  video_element.currentTime = ts; // if this is far enough away from current, it implies a "play" call as well...oddly. I mean seriously that is junk.
    // however if it close enough, then we need to call play manually
    // some shenanigans to try and work around this:
    var timer = setInterval(function() {
        if (video_element.paused && video_element.readyState ==4 || !video_element.paused) {
            video_element.play();
            clearInterval(timer);
        }       
    }, 50);
}
于 2017-01-21T06:40:47.397 回答
1

最佳答案已过时。

您仍然可以使用：

this.video.currentTime = 10 // seconds

但现在你也有：

this.video.faskSeek(10) // seconds

文档提供了有关该fastSeek方法的以下警告：

实验性：这是一项实验性技术，在生产中使用之前请仔细检查浏览器兼容性表。HTMLMediaElement.fastSeek() 方法通过精确权衡快速将媒体搜索到新时间。如果您需要精确查找，则应改为设置 HTMLMediaElement.currentTime。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/fastSeek

基于上述情况，如果跨浏览器兼容性和性能是您的首要任务，我猜以下是最好的：

const seek = secs => {
  if (this.video.fastSeek) {
    this.video.fastSeek(secs)
  } else {
    this.video.currentTime = secs
  }
}
seek(10)

如果您更喜欢准确性而不是性能，请坚持：

this.video.currentTime = secs

在撰写本文时，faskSeek仅向 Safari 和 Firefox 推出，但预计这种情况会发生变化。查看上述链接中的兼容性表，了解有关浏览器兼容性的最新信息。

于 2021-09-23T00:26:58.460 回答