:::: MENU ::::

Flowplayer jQuery Plugin – resume from the last played position

Perhaps you might have seen many video on youtube especially long movie or music jukebox. If you close your browser and come back to that video even after few days, video will pause from last played position.

In this tutorial We’ll see how to implement that kinda setup on popular flowplayer.

Get flow player from official website and make this minimal setup.

Now to implement resumable playback on flowplayer we need to write a javascript module that continuously track playback position and store it into user browser using HTML5 localstorage or cookie.

flowplayer

To manipulate HTML5 WebStorage, We’ll use a jQuery plugin called totalStorage is available here. So just download and include it.

I’ll use javascript module pattern to implement resumable flowplayer.
Basic code structure for module pattern is.

In above code variable module will become global variable and you could initialize it as module.init(); from anywhere.

use strict; // is latest ECMAScript 1.8.5 syntax to make script parsing strict on modern browsers.

So, plugin code would be

To call this plugin Use,

Demo    Download

4 Comments

  • Reply jschuler |

    Hi is there a way I can use the variable for the time the video stopped at elsewhere in the page? I have an asp page and the following code that reveals text on the video at a specific time in the video. I want ot adjust this time based on where the video restarts at so I am thinking I will subtract the stop time from this and it should adjust accordingly. I am just wondering if you could tell me the variable from your coding I could call.

    REVEALDELAY = (30*60*1000) + (41*1000) // 30 minutes 41 seconds

  • Reply jschuler |

    By the way this post was great and was very easy to implement and work from the start. Thank you very much.

  • Reply Surendar |

    Thank You for sharing this code, It working fine. As i am beginner , I struggle where to add a control option . I add the control in video tag . But the controls are not active in the video section .Can You Please Guide me where to add .

So, what do you think ?

  •