Issues with HTML5 Video currentTime property

Question

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

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

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.

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

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

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.

Answer 1

I assume you're working with a <video> which has the HTMLVideoElement interface, inheriting from HTMLMediaElement. In that interface you'll notice

seekable Read only TimeRanges The time ranges that the user is able to seek to, if any.

This suggests that if you set currentTime to a time outside of seekable, it will not work as expected. I don't have a test environment for this (maybe you could set up a fiddle) but I suspect calling videoElement.load() after setting currentTime or using fastSeek, (before the play) would encourage the video to become seekable and therefore playable from that point. You may find preload achieves this automatically.

These interfaces are new and subject to ongoing change, so it's to be expected that in the future code my break.

Answer 2

this is work for me ..

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

The response video must have the header Accept-Ranges: <bytes> to correctly set the currentTime property.