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

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

• javascript
• android
• ios
• html
• mobile

Share Improve this question Follow edited Aug 18, 2011 at 1:28 WrightsCS 50.7k2323 gold badges138138 silver badges188188 bronze badges asked Aug 18, 2011 at 0:46 DevDevDevDevDevDev 5,17788 gold badges5858 silver badges8989 bronze badges 3

• What values can ui.value have? – Ian Devlin Commented Aug 18, 2011 at 8:22
• The values within the range of the videos duration. – DevDevDev Commented Aug 18, 2011 at 16:47
• Can you show nore of your code? $gVideo[0] doesn't look like a proper reference to me. – Ian Devlin Commented Aug 18, 2011 at 18:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.