Reset a Video on Mouse out Using Html5 and Javascript

Reset a Video on Mouse out Using Html5 and Javascript

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! :)

1

1 Answer

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.

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

James H. Sterling
Author

James H. Sterling

James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.