Grow your CSS skills. Land your dream job.

Add loading animation to mouseover while video loads.

  • # October 1, 2012 at 5:43 am

    Hello and good day!

    I hope I can get some help with the following problem. :)

    I am trying to add a loader animation like this or anything similar to the thumbnails while the video loads when the mouse hovers.:
    var cl = new CanvasLoader(‘canvasloader-container’);
    cl.setColor(‘#545454′); // default is ‘#000000′
    cl.setDiameter(55); // default is 40
    cl.setDensity(44); // default is 40
    cl.setFPS(22); // default is 24
    cl.show(); // Hidden by default

    When I first added the play video on hover script all the videos loaded on page load which increased page speed loads dramatically . So I added preload=”none” to the videos, but the visitor now has no way of knowing that the video is loading. So what I would like to do is add a loading animation to let them know to wait for the video to load.

    this is the code for the video to play on mouseover:

    // something along that
    var vid = document.getElementsByTagName(“video”);
    [].forEach.call(vid, function (item) {
    item.addEventListener(‘mouseover’, hoverVideo, false);
    item.addEventListener(‘mouseout’, hideVideo, false);
    });

    function hoverVideo

    And this is the HTML code:



    preload=”none”>


    So my question is how can I add the first animation into the javascript while the video loads or anything similar to that.
    Also I would like to have the thumbnails to reset after the mouse leaves the thumbnail, if possible.

    Below is an example on my website. Just hold the mouse over any of the thumbnails and the animation should start after a few seconds.
    http://motion-master-templates.com

    If you have any suggestions, recommendations or critiques on how to improve on this will be much appreciated. :)

    Thank you for your time and have a wonderful day!

    _Deyson

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".