Improving the MediaElement.js Loading Animation

I’ve been using MediaElement.js recently, to display videos on a client’s site. One thing that bothered me was the loading animation that played. It looked unfinished – showing up in a small dark square – almost like it was supposed to be completely transparent, but wasn’t.  Here’s an image of how it is in the current release:

I looked into it, and the reason for it is because the loading animation is an animated gif. Gif’s don’t support alpha transparency, so the edges don’t blend well with the background video, which is the reason for the transparent box around it.

I updated the css for MediaElement.js to make the dark background square fill the video screen.  I found that helped the loading animation blend in better, and not seem so out of place. Here’s how it looks after my changes:

With MediaElement.js being open source and on GitHub, it made it very easy for me to share my changes. I forked the code, applied my changes and created a pull request. Hopefully these changes will make their way into a MediaElement.js release in the future. In the meantime, you can grab the updated version here:

https://github.com/ccoulson/mediaelement/commit/866b1d8ac725ed0997a12232fb4446041a249415