Autoplay videos on hover

When we open social media apps like Facebook and Twitter, there is a very cool feature to play videos automatically when your mouse comes on them or video scroll to center of page. I was quite curious to check this feature and did some hands-on on it. Want to share my experience with all.

First of all, we have to take care of two things.

1. What kind of videos we are gonna play like videos hosted on Youtube/Vimeo etc. or raw videos hosted on our server itself. This is because we cannot play Youtube videos with HTML5 video tag. We have to use a player for it. On other hand, we can use HTML5 tag to play raw videos hosted on our server.

2. What library we are gonna use to play videos. It can be a video player or HTML5 video tag as well. Again, it will also be decided by above point as well as your choice.

Note: Youtube/Vimeo players can be used as they generally come in iframes. We cannot autoplay videos on them. We have to use another players to warp these videos.

I have used a library MediaElementJs to run Youtube videos as they cannot be run through HTML5 video tag. It is quite a good library to run alomost all kind of videos plus it is free. Go through its documentation to know more about it.

I have created some demos to run raw videos using HTML5 video tag and also to include mute feature to control muting on hover. Checkout all of them here. You can get the full code in this repo.

Hope this helps. Happy Coding!