HTML5 视频 currentTime 属性的问题

Question

一段时间以来，我一直在对 HTML5 视频进行一些广泛的试验。 一个似乎不断出现的问题是操纵 currentTime 属性。

这是我的项目和脚本的简要概述：

我有几个数组存储有关视频序列的信息（视频文件名、开始时间、持续时间、音频时间）； 基本功能是视频剪辑开始播放，下一个文件开始加载，当当前播放的视频达到其目标持续时间时，加载的视频开始播放等。目前我正在离线进行所有这些操作，所以实际下载时间对我来说还不是问题。 所以为了简化，我的数组看起来像这样：

videoArray = ["clip01.webm", "clip05.webm", "clip03.webm"];
startArray = [0.5, 0, 1.5];
durationArray = [5, 2.1, 1.5];

我一直面临和解决的最大问题是设置每个视频的开始时间。 每次我让它工作时，我似乎都必须在几周或几个月后找到一个新的解决方案。 发生此问题的函数如下： 初始化第一个视频后，脚本调用时间更新函数（缩短代码）：

function timeUpdate() {

    var clip = document.getElementById(currentVideoTagId);
    clipTime = clip.currentTime;

    drawClip(clip); // function that displays the clip in a canvas element

    switchClip(); // function that checks for clip's target duration

    setTimeout(timeUpdate,40);
}

如您所见，此函数使用 SetTimeout 将 Video 绘制到 Canvas 元素中。 这也是我不断检查 1）是否已加载下一个要播放的剪辑以及 2）当前播放的视频是否已达到其目标持续时间（缩短的代码）的地方：

function switchClip() {

        if(!nextIsLoading){
            loadClip(nextSequenceIndex); // function that sets the video source, etc

            $("#" + nextVideoTagId).bind('canplay', function() {
                this.currentTime = sequence.starts[nextSequenceIndex];
            });

            nextIsLoading = true;
        }

        if(clipTime >= currentCut){

            playClip(); // function that starts playing the video
            nextIsLoading = false;
        }
}

所以使用检查'canplay'的jQuery绑定是我最新的解决方案，它已经工作了一段时间。 我一直在 Mac for Chrome（最新版本）上进行所有实验。 我用 PHP 从数据库中生成了我的序列数据。 我最近切换到 PC（再次使用最新版本的 Chrome），因为我已经开始使用 Webmatrix 为这个新版本的项目生成我的序列数据。 据我所知，该项目的 javaScript 部分基本上是相同的，除了设置 currentTime 之外，一切正常。

更准确地说：视频的 currentTime 仍然设置，我做了很多 console.logging 来观察正在发生的事情以及可能发生错误的地方，但是，对我来说最奇怪的事情发生在这里（缩短的代码）：

function playClip(){
    var newVideo = document.getElementById(currentVideoTagId);
    console.log("currentTime before play: " + newVideo.currentTime);
    newVideo.play();
    console.log("currentTime after play: " + newVideo.currentTime);
}

此函数中的第一个日志始终显示我之前设置的 currentTime。 在 play() 之后，currentTime 总是回到 0。

到目前为止，我已经测试了很多东西，我一直在谷歌和这里，在 Stackoverflow 上寻找答案（这就是这个解决方案最初是如何工作的），但我现在已经没有解决方案了.

有没有人可以对这个问题有所了解？

我希望这篇文章能提供关于这个问题的足够信息。

Answer 1

我假设您正在使用具有HTMLVideoElement接口的<video> ，继承自HTMLMediaElement 。 在该界面中，您会注意到

seekable Read only TimeRanges用户能够搜索到的时间范围（如果有）。

这表明如果您将currentTime设置为seekable之外的时间，它将无法按预期工作。 我没有为此的测试环境（也许你可以设置一个小提琴），但我怀疑在设置currentTime或使用fastSeek之后调用videoElement.load() ，（在play之前）会鼓励视频变得可搜索并因此可播放从那时起。 您可能会发现preload会自动实现这一点。

这些接口是新的，并且会不断变化，因此可以预期在未来的代码中我会中断。

Answer 2

这对我有用..

video = document.getElementById('video');
begin_play  = 50;
play_video_frist = true; //if you want to run only frist time    
video.addEventListener("play", capture, false);

function capture(event) 
{
     if (event.type == "play"){
         if(play_video_frist){
             play_video_frist = false;
             video.currentTime = begin_play;
          }
     }
}

Answer 3

响应视频必须具有标头Accept-Ranges: <bytes>才能正确设置currentTime属性。