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将视频绘制到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

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

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

这表示如果将 currentTime 设置为 seekable 之外的时间，则无法按预期工作。我没有这方面的测试环境（也许您可以设置fiddle）但我怀疑在设置 currentTime 或使用videoElement.load()后调用fastSeek，（在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属性。

HTML5 Video currentTime属性的问题

3 个答案: