WordPress.org

Ready to get started?Download WordPress

Forums

Play video on hover. (14 posts)

  1. Deyson
    Member
    Posted 2 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!

  2. Ben Sutcliffe
    Member
    Posted 2 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();
    });
  3. Deyson
    Member
    Posted 2 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! :)

  4. Ben Sutcliffe
    Member
    Posted 2 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();
    });
    });

  5. Deyson
    Member
    Posted 2 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 :)

  6. Attaroa
    Member
    Posted 1 year 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!

  7. Deyson
    Member
    Posted 1 year 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 :)

  8. Attaroa
    Member
    Posted 1 year ago #

    Thanks! I'm going to take a look :)

  9. Deyson
    Member
    Posted 1 year ago #

  10. Attaroa
    Member
    Posted 1 year 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>
  11. Deyson
    Member
    Posted 1 year ago #

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

  12. Deyson
    Member
    Posted 1 year 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 ! :)

  13. Attaroa
    Member
    Posted 1 year 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.

  14. Deyson
    Member
    Posted 1 year 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/

Topic Closed

This topic has been closed to new replies.

About this Topic