I was thinking about the advantages of the DIV vs canvas to create my visualized timeline last night and came up with an interesting point.
As discussed in my last post, I'm going to have to remove the current time cursor and add it back onto the base layer. Unless I use dynamic divs.
If I use styled divs I can set the current position cursor's div to the constantly changing current time of the media element. This would take a lot of the effort off my own code and change the div's relative position dynamically.
The steps in order to do so would be as followed:
1. Create an encapsulating div.
2. Create the wide base time line bar div.
3. Overlay the cursor div inheriting using the same Y position as the base and use it's X position as the current time variable within the media element. I can just use the duration variable in the media element to calculate the proper spot for the div in a calculation.
4. Lastly, just overlay the divs for the track event visuals with mouse over events at relative start time position for those events.
What I'll still need is:
Popcorn's media element's id to track it down on the page and get it's information.
A listener for the track events that will get their info.
The process order would be:
Create all the variables
Load all the variables on popcorn's media element
Create the event divs on addtrackevent call with mouseover event
This seems to be an a quicker and easier way to keep track of all the visuals needed to create the timeline.