User creates a canvas and passes the plugin the canvas name along with wanted width, height, and the same media id as popcorn is passed.
The plugin then sets itself to be run at time zero, grabs a reference to the popcorn object calling it, sets up the canvas, and sets a listener on the media element.
When the media element is done loading, it stores a reference to the media element's video duration and current time.
An interval function is set with the draw function.
The draw function calls and stores the return value getTrackEvents using the stored popcorn instance that called the plugin, draws out the appropriate timeline box, draws the cursor in the right spot using the stored duration and currentTime variables, and then draws out the spots where events are going to be called by the popcorn instance.
Pretty simplistic so far but I'm going to add more features in the next few days such as:
When mouseover the canvas check the positioning of the mouse and check that versus the X coordinates of the showing events. Create a floating div over top showing some information like literal start time, literal end time, and a description if available.
Clicking on the timeline can change the currentTime of the media element so that you can use the visualized timeline bar as a normal timeline bar. Pause/Play could be implemented as well.
Going to clean it up and make it look a bit nicer playing with some of the canvas draw functions.
Could have the the current time drawn as text.
Research some better ways rather than drawing X frames per second.
*Below are just two screen shots showing the simplistic visualized timeline so far*
No comments:
Post a Comment