This is fairly simple with HTML5 video or a YouTube embed, but not for Flash.
For a HTML5 video with jQuery loaded, you’d just need to have a JavaScript snippet along the lines of:
$("video").bind('mouseenter', function() {
$(this).play();
});
Thread Starter
deyson
(@deyson)
Thank you very much for taking the time to help me Ben. 🙂
I am pretty much new to world of java, where would I place the code you added?
Just so you know I am using a twenty eleven child theme.
Also how would I load jQuery or make sure it is on my site?
Thank you very much and have a wonderful day! 🙂
In your theme functions file (functions.php), paste this:
add_action('wp_enqueue_scripts', 'jquery_method');
function jquery_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
In whichever template that displays the video paste:
$(document).ready(function() {
$("video").bind('mouseenter', function() {
$(this).play();
});
});
Thread Starter
deyson
(@deyson)
Hello Ben. thank you.
In the second part of whichever template that displays the video, do you mean the page template like Default, Sidebar and Showcase. Right now I am using default.
Again thank you very much 🙂
Hi Dyson,
I was wondering if you found a solution for this. I also want this same hover effect on my wordpress website, but I can’t figure out how to do it.
Thanks very much for your reply!
Thread Starter
deyson
(@deyson)
I was able to get it to work using Flowplayer.org Check out their forums it is in there that I got the answer 🙂
Thanks! I’m going to take a look 🙂
Thread Starter
deyson
(@deyson)
Thanks for your help, but I found a much easier solution.
Just place this code in your page/post/widget where you want the mouseover video to be displayed:
<video src="video.webm" id="id0" width="300" onMouseOver="id0.play()" onMouseOut="id0.pause()" onclick="window.location='video.webm';id0.pause()" loop title="video.webm
" ></video>
Thread Starter
deyson
(@deyson)
That is all? Sounds way too simple. 🙂 Let me try it out.
Thread Starter
deyson
(@deyson)
Very cool. The only thing it needs is a video poster and a way to add HTML5 videos and it is rocking.
I will try t figure that out, if you do let me know. Thank you ! 🙂
I know, it’s much simpler than I thought.
You can add a poster by adding poster=”image.jpg” to the tag.
<video poster="image.jpg" src="video.webm" id="id0" width="300" onMouseOver="id0.play()" onMouseOut="id0.pause()" onclick="window.location='video.webm';id0.pause()" loop title="video.webm
" ></video>
If the uploader of WordPress does not support .webm, .ogg or .mp4 files (I haven’t checked that), you can always use a ftp program to upload the video’s.
Thread Starter
deyson
(@deyson)
Here is another solution similar to yours, the only difference is that the code is called in with JS. so you do not need to replicate the code each time: http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/