HTML5 Video currentTime属性的问题 [英] Issues with HTML5 Video currentTime property

问题描述

我一直在做一些广泛的HTML5视频试验。似乎不断出现的一个问题是操纵currentTime属性。

I've been doing somewhat extensive experimenting with HTML5 Video for a while now. One issue that seems to keep arising is manipulating the currentTime property.

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

Here is a brief overview of my project and script:

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

I have a few arrays that store information (video file name, start time, duration, audio time) about a video sequence; the basic functionality is that a video clip starts playing, the next file starts loading, and when the currently playing video reaches its target duration, the loaded video starts playing, etc. At the moment I'm doing all this offline, so the actual downloading times are not an issue for me yet. So to simplify, my arrays would look something like this:

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

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

The biggest issue I keep facing and solving is setting the start time of each video. Every time I get it to work, I seem to have to find a new solution a few weeks or months later. The functions in which this issue is happening are as follows: After initializing the first video, the script calls a time-update function (shortened code):

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

如您所见，此功能将视频绘制为Canvas元素，使用SetTimeout。这也是我一直在检查1）下一个要播放的片段是否已加载以及2）如果当前播放的视频已达到其目标持续时间（缩短的代码）：

This function, as you can see, draws the Video into a Canvas element, using SetTimeout. This is also where I keep checking if 1) the next clip to play has loaded and 2) if the video currently playing has reached its target duration (shortened code):

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之外，一切都有效。

So using the jQuery bind that checks for 'canplay' was my latest solution and it has worked for a while. I had been doing all my experiments on a Mac for Chrome (newest version). I generated my sequence data with PHP out of a database. I recently made a switch to PC (using the newest version of Chrome again), as I've started to use Webmatrix to generate my sequence data for this new version of the project. The javaScript-part of the project is essentially the same, as far as I can tell, and everything works, apart from setting currentTime.

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

To be more exact: the video's currentTime still gets set, I've done a lot of console.logging to observe what's happening and where errors might occur, but, what is the most peculiar thing to me, happens here (shortened code):

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。

The first log in this function always shows the currentTime I have set previously. After play() the currentTime is always back to 0.

我已经测试了很多东西，我一直在谷歌和这里，在Stackoverflow上寻找答案（这是以前一直有效的解决方案），但现在我的解决方案已经用完了。

I've tested quite a few things by now and I keep looking for answers on Google and here, on Stackoverflow (which is how came to this solution that has worked before in the first place), but I'm running out of solutions now.

是否有人可以使用对这个问题有所了解？

Is there anyone who may be able to shed some light on this issue?

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

I hope this post provides enough information on the problem.

推荐答案

这对我有用..

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

这篇关于HTML5 Video currentTime属性的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！