Play video on hover.

  • deyson

    (@deyson)


    12 years ago

    Hello, I have been trying to figure this out for quite a while.

    I would like to add an image that plays a video when the mouse hovers, if you look at this link under section 5.3 you will see a perfect example of what I need: http://www.html5rocks.com/en/tutorials/video/basics/

    This will need to get this to work in my WordPress child theme.

    I have looked at other demos, but the above link has the only one that works.
    I also like that it has an HTML5 video fallback.

    I consider myself a novice when it comes to scripts so I may need some a little detail please.

    Any help will be very very very appreciated! Thank you and have a grand day!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Ben Sutcliffe

    (@bsutcliffe)

    12 years ago

    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)

    12 years ago

    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! 🙂

    Ben Sutcliffe

    (@bsutcliffe)

    12 years ago

    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)

    12 years ago

    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 🙂

    Attaroa

    (@attaroa)

    11 years, 5 months ago

    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)

    11 years, 5 months ago

    I was able to get it to work using Flowplayer.org Check out their forums it is in there that I got the answer 🙂

    Attaroa

    (@attaroa)

    11 years, 5 months ago

    Thanks! I’m going to take a look 🙂

    Thread Starter deyson

    (@deyson)

    11 years, 5 months ago

    You can see the end result here: http://motion-master-templates.com/category/all-templates

    Attaroa

    (@attaroa)

    11 years, 5 months ago

    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)

    11 years, 5 months ago

    That is all? Sounds way too simple. 🙂 Let me try it out.

    Thread Starter deyson

    (@deyson)

    11 years, 5 months ago

    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 ! 🙂

    Attaroa

    (@attaroa)

    11 years, 5 months ago

    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)

    11 years, 5 months ago

    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/

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Play video on hover.’ is closed to new replies.