The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Add loading animation to mouseover while video loads.

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #40083

    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; // 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”);
    [], function (item) {
    item.addEventListener(‘mouseover’, hoverVideo, false);
    item.addEventListener(‘mouseout’, hideVideo, false);

    function hoverVideo

    And this is the HTML code:


    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.

    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!


Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.