Video.js: Replace loading spinner with gif animation

[pblasi]

Hi,

I would really appreciate if someone could tell me how to replace the default font-based loading spinner with a "gif" animation. I've tried modifying some lines in CSS, adding "background:(url:...)" but no success... :(

[Mikhus]

As solution, you can override vjs.LoadingSpinner to your custom implementation. That's what I did for my needs.

[heff]

The previous version used divs + css to make the spinner. Looking at that might get you closer to what you want.
https://github.com/videojs/video.js/blob/3.2.3/src/controls.js#L233

[MDXDave]

Found a solution:

Add/Replace the following CSS Code:

.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:7em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;/*-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear*/}
.vjs-default-skin .vjs-loading-spinner:before{/*content:"\e01e";font-family:VideoJS;*/position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}

If you want to re-size the image, just change font-size :)

And add following javascript code to execute when document is ready (requires jQuery):

$(document).ready(function(){
$('.vjs-loading-spinner').html('<img src="/path/to/preloader.gif" alt="Loading...">');
});