0

一段时间以来，我一直在对 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 上寻找答案（这就是这个解决方案最初是如何工作的），但我现在已经没有解决方案了.

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

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

4

3 回答 3

0

这对我有用..

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;
          }
     }
}
于 2014-08-26T10:02:24.330 回答
0

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

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

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

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

于 2013-09-17T01:39:54.107 回答
0

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

于 2020-12-15T07:13:16.703 回答