Home › Forums › JavaScript › Add loading animation to mouseover while video loads.
- This topic is empty.
-
AuthorPosts
-
October 1, 2012 at 5:43 am #40083DeysonMember
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 defaultWhen 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.comIf 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
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.