HTML5 视频 currentTime 属性的问题答案

【问题标题】：Issues with HTML5 Video currentTime propertyHTML5 视频 currentTime 属性的问题
【发布时间】：2013-09-17 00:55:07
【问题描述】：

一段时间以来，我一直在对 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 将视频绘制到 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。

到目前为止，我已经测试了很多东西，我一直在 Google 和这里，在 Stackoverflow 上寻找答案（这就是这个解决方案最初有效的方法），但我快用完了现在的解决方案。

有没有人可以解释一下这个问题？

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

【问题讨论】：

您的示例数组无效； {} 是 Object 表示法，[] 是数组。
对不起，我在这里打错了。我修复了帖子。

标签： javascript html video

【解决方案1】：

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

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

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

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

【讨论】：

嗨，保罗，非常感谢您的回答。你提到了一些我还没有研究过的事情，并将继续这样做。奇怪的是，我 Mac 上的项目（使用相同的 javaScript 代码）仍然有效。不幸的是，我目前必须为此使用不同的计算机，因为由于某些原因我无法在 PC 上安装我需要的软件，而且很明显不能在 Mac 上使用 Webmatrix。我会尽快在其他一些机器上测试它，看看会发生什么。有没有可能这是硬件问题？
播放视频时，虽然位置不对，但我看不出这是硬件问题。不过，不同的浏览器实现可能会有所不同。
不幸的是，可搜索属性和 fastSeek 对我没有多大帮助。然而，我现在回到了浏览器兼容性的话题。以下线程表明 Chrome 无法处理部分内容请求：stackoverflow.com/questions/8088364/html5-video-will-not-loop。不幸的是，我对服务器没有深入的了解，但我想我在这台计算机上使用的本地服务器的行为可能与我的另一台不同？我必须可耻地承认，我现在才在 Firefox 中尝试了该演示，发现它在那里按预期工作。

【解决方案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;
          }
     }
}

【讨论】：

【解决方案3】：

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

【讨论】：