-Added allowing users to click on the time line to change the current time of the media
To do:
-Add pause/play
-Add current time : duration text
-Make it look more presentable (round rectangles, better colors, etc.)
Wednesday, October 26, 2011
Visual time Line Additions
-Added in a div when hovering over track event points on the time line.
-Added allowing users to click on the time line to change the current time of the media
To do:
-Add pause/play
-Add current time : duration text
-Make it look more presentable (round rectangles, better colors, etc.)
-Added allowing users to click on the time line to change the current time of the media
To do:
-Add pause/play
-Add current time : duration text
-Make it look more presentable (round rectangles, better colors, etc.)
First draft on canvas
I've been fiddling around with a bunch of different concepts and ideas but this my first simple prototype.
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*
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*
Tuesday, October 25, 2011
DIV vs Canvas for visualized timeline
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.
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.
Monday, October 24, 2011
Thinking out the visualized timeline
As of late, I've been diving into some of the popcorn.js to see what the best of way working out the visualized timeline would be.
I've come up with an idea of how it should work.
-Create variables to hold array of event tracks, and number of event tracks. Put number of event tracks into a safe state (0)
-When popcorn gets its media element, load the timeline data object with references to the media element (current and time), as well as a reference to the event tracks array and number of event tracks
-Draw a base for the visualized timeline that will have a current time cursor layer and event tracks layer on top
-When the current time changes, clear the layer containing the current time cursor, and add it back on at the appropriate spot.
(I'm a little worried this might be slow as every time the time changing, a removal and creation must happen)
-Whenever addTrackEvent is called, add that track into the track events array existing in the plugin, and add that track event onto the visualized timeline in the track event layer.
(This allows the plugin to keep track of track events that are created on the fly)
-A good idea would be to create a mouseover event to display a popup div with relevant data about a track event
Object for holding timeline data:
{
current: (current time in video - references video element's currentTime property)
time: (full video time - references video element's duration property)
tracks: (array holding event track objects - references a static array in the visualized timeline plugin)
nTracks: (number of tracks - references a static variables holdings number of even tracks in visualized timeline plugin)
}
So I have to figure out:
-How to get the media object upon popcorn instance creation
-How to have my plugin be notified upon track event creation/grab that track event to hold onto
I was a little worried about firing events at variable changes but I found a nice stackoverflow article showing how to create an object.watch method for the object prototype: http://stackoverflow.com/questions/1759987/detect-variable-change-in-javascript
The next few days should be interesting indeed.
I've come up with an idea of how it should work.
-Create variables to hold array of event tracks, and number of event tracks. Put number of event tracks into a safe state (0)
-When popcorn gets its media element, load the timeline data object with references to the media element (current and time), as well as a reference to the event tracks array and number of event tracks
-Draw a base for the visualized timeline that will have a current time cursor layer and event tracks layer on top
-When the current time changes, clear the layer containing the current time cursor, and add it back on at the appropriate spot.
(I'm a little worried this might be slow as every time the time changing, a removal and creation must happen)
-Whenever addTrackEvent is called, add that track into the track events array existing in the plugin, and add that track event onto the visualized timeline in the track event layer.
(This allows the plugin to keep track of track events that are created on the fly)
-A good idea would be to create a mouseover event to display a popup div with relevant data about a track event
Object for holding timeline data:
{
current: (current time in video - references video element's currentTime property)
time: (full video time - references video element's duration property)
tracks: (array holding event track objects - references a static array in the visualized timeline plugin)
nTracks: (number of tracks - references a static variables holdings number of even tracks in visualized timeline plugin)
}
So I have to figure out:
-How to get the media object upon popcorn instance creation
-How to have my plugin be notified upon track event creation/grab that track event to hold onto
I was a little worried about firing events at variable changes but I found a nice stackoverflow article showing how to create an object.watch method for the object prototype: http://stackoverflow.com/questions/1759987/detect-variable-change-in-javascript
The next few days should be interesting indeed.
Sunday, October 16, 2011
Visual Timeline Possibilities
My teacher for Open Source made a good point about implementing this. It is extremely broad and a lot of things are to be taken into consideration.
Plugin vs. Direct Integration. Direct integration would be easier but how much would it bloat the core?
Canvas vs. Div. Plugins for now are all just using their own div, but using a canvas instead would be interesting. A canvas would allow for more graphical capabilities.
*OR* If possible edit the html5 video element's timeline directly.
Once I've further discussed this with other members of the popcorn team, there's one thing for now that may cause some problems. Popcorn is able to create a new event from a previous event. So when drawing out the visual timeline with all the events, some of them might not exist yet. However I end up doing the new timeline, it has to listen to event creations to re-update the timeline.
A trip to CDOT seems to be in store sometime tomorrow to talk with the popcorn team.
Popcorn visualized timeline
Decided I needed a change of pace and after roaming around the other open source projects, I came across a cool ticket for Popcorn. It's to create a plugin for popcorn that allows for a nice way to visualize the popcorn timeline. In short, it should show a timeline bar with all the points where other popcorn objects are going to be shown. I'm thinking about also adding in a mouse-over event to show a quick description for what the event is.
Subscribe to:
Posts (Atom)