在 html5 视频中寻找一个点答案

【问题标题】：seek to a point in html5 video在 html5 视频中寻找一个点
【发布时间】：2012-05-14 18:08:40
【问题描述】：

是否可以在网页中找到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;
            }
        });
}
);

【问题讨论】：

HTML5 video seeking [updated]的可能重复

标签： javascript html html5-video seek

【解决方案1】：

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

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

【讨论】：

服务器还需要在响应中包含以下标头："Accept-Ranges": "bytes"
这不适用于 4MB 左右的一些视频。有什么想法吗？

【解决方案2】：

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

这是我目前的工作：

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

【讨论】：

【解决方案3】：

最佳答案已过时。

您仍然可以使用：

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，但预计这种情况会有所改变。查看以上链接中的兼容性表，了解有关浏览器兼容性的最新信息。

【讨论】：