I have a very wide and short video as mp4., about 15 seconds.
I would like to use this video as its own scrubber. That is, say the video is 1000p wide. (It is actually 1700)
Then if the user puts the cursor at 800p, the film would be advanced to .8 of its length. There has to be an easy way to do this, even in FWP.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You can do this with JavaScript.
Basically, you trap any clicks on the video element, look at their x/y offset from the video itself, and use that to calculate the frame that the video should move to. You’re going to want to control the video’s currentTime attribute.
Here’s a very naive example (no fallbacks for the various browsers, only tested in Safari): Video
View the page source to see how it works. There’s a video, set to not play. Below that, there’s a Prototype JavaScript observer function that listens for each click on the video element. When it “hears” one, it takes the offsetX of the click event, and cross-multiplies it with the width of the video and the duration of the video to come up with the proper frame to show. This value is passed to the currentTime attribute (which is a combination getter/setter in OO programming parlance) and the movie jumps to that frame. Commented out below that line is the command to play the movie. If you uncomment that line, you will see the movie start playing from wherever you clicked.
Walter
On Apr 18, 2014, at 11:25 PM, tedg wrote:
I have a very wide and short video as mp4., about 15 seconds.
I would like to use this video as its own scrubber. That is, say the video is 1000p wide. (It is actually 1700)
Then if the user puts the cursor at 800p, the film would be advanced to .8 of its length. There has to be an easy way to do this, even in FWP.
https://s3-us-west-2.amazonaws.com/tedgimages/blog/Strip+Animation.mp4
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Great. Can this same code work with mouse over instead of mouseover? In this case, mousedown would start the playing.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can this same code work with mouse over instead of mouseover? In this case, mousedown would start the playing.
Not quite clear what you are asking for as it is the click (mousedown) function that determines at what point to start the video.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Try it. Substitute the event you want to observe for the click event I show in my example. If you want to observe the mouseover, just put mouseover in place of click in the script and see what happens.
As long as you don’t start the movie playing, this should “scrub” the movie to the percentage that your mouse is over the width of the movie. Once you start the movie playing, it may get chancier for this to work.
I don’t know at what frequency the mouse position is sampled (probably varies based on the performance of the device) so this could stutter a bit.
Also, mouseover is entirely missing on mobile devices (while click is emulated to respond to touchstart and touchend in the same x/y area). This effect will most likely be entirely lost on the iPad crowd.
Walter
On Apr 21, 2014, at 5:02 AM, DeltaDave wrote:
Can this same code work with mouse over instead of mouseover? In this case, mousedown would start the playing.
Not quite clear what you are asking for as it is the click (mousedown) function that determines at what point to start the video.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 21 Apr 2014, 9:02 am, DeltaDave wrote:
Not quite clear what you are asking for as it is the click (mousedown) function that determines at what point to start the video.
The desired behavior, as Walt notes, is that as a user hovers over the frame, the movie within/under changes frames to match horizontal position. Walt’s example only changes frames when cursor clicks. There has to be some analog for touch interfaces, but I’ll worry about that later.
It is less important right now for my use what happens when the cursor is clicked, but for now, clicking to start from the selected frame is good.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options