1

I am trying to get the video that appears after the hover to reset to the start once the mouse leaves, here is the link to my test. I found this in my search for an answer But I can not figure it out how to make that work.

Here is where I got the code for the javascript: Link to code

Any help or advice would be great. Thank you! :)

Community
  • 1
  • 1
Deyson
  • 80
  • 1
  • 9

1 Answers1

6

Since your site uses jQuery:

$(".h5vt").mouseout(function() {
    $("video").get(0).currentTime = 0;
})

Just bind a mouseout event to the image that rewinds the video.

You should add an id attribute to video and access it with $("#myvideoid").get(0) or document.getElementById("myvideoid") instead of with $("video").get(0) as in my example. My selector code is just a workaround due to the fact that your video element lacks an id.

apsillers
  • 112,806
  • 17
  • 235
  • 239
  • Thank you very much again, I have another question :) Do you know of a way to shut this all off so it does not work on an iPad or iPhone as that will keep the video from continuing to play even when a user moves on. The other option I found was doing something like this hover: http://www.html5rocks.com/en/tutorials/video/basics/#toc-fun-css It is the 5.3 + CSS example. Which one do you think I should stick to? The new one I found seems a lot cleaner without having to worry about hover on iPad or the popup going off the screen. Thank you very much for your time. :) – Deyson May 14 '12 at 15:32
  • I'm afraid I can't halp you too much there -- I'd suggest just trying something out, and if you run into problems, start a new question about exactly what you want to happen on mobile devices. – apsillers May 14 '12 at 16:12