Speeding up HTML5 video seek?

Hey all I wonder if you guys know some trick that could help me out. What I have implemented is a slider that controls the seek position of an HTML5 video via the currentTime property. What I would like to have hap开发者_JAVA百科pen is as the user is dragging the slider the video is updating in real time.

What I have works but the video players image doesnt update to each frame as I set the current time. Any thought?

slide: function(e, ui){
    seeksliding = true;
    $gVideo[0].currentTime = ui.value;
},

---

Modern browsers are generally very good at seeking quickly, even to the point where you can synchronize two or more videos using Javascript, with the same kind of functionality you're describing. (Firefox around version 4-5 would take a few extra milliseconds and lose sync, but it's better now.)

The code you have should work, as long as ui.value is between zero and the duration of the video. But you may run into problems if a) the video is not loaded or b) there is something up with the encoded video file.

First, make sure the browser can play the video and seek without any Javascript controls. Just try opening up the file in the browser, first straight off your hard drive and then off the network. If you can't seek with the native controls, you can't seek with Javascript. I've sometimes seen seeking errors solved by re-encoding a video without B-Frames.

Next, see if the video is loaded when you're trying to seek. You can speed this up by adding a preload attribute to the video tag. And make sure the slider event isn't enabled until the browser has the video's duration, by putting the slider code inside a loadedmetadata event.