jQuery Plugin To Sync Html5 Video With Content - VideoSync

File Size: 14.3 KB
Views Total: 4132
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Sync Html5 Video With Content - VideoSync

VideoSync is a jQuery plugin used to synchronize web content with your HTML5 video base on the timeline. The plugin allows you to fade in/out different context-sensitive content during an html5 video playing on the webpage.

Basic usage:

1. Place jQuery library and the jQuery videosync plugin at the end of the document.

<script src="jquery.min.js"></script>
<script src="jquery.videosync.min.js"></script>

2. Include the animate.css for additional CSS3 animations (OPTIONAL).

<link rel="stylesheet" href="animate.min.css">

3. Embed an Html5 video into your webpage.

<video class="vs-source" controls>
  <source src="video.mp4" type="video/mp4">

4. Add your custom context-sensitive content using Html5 data attributes like this:

  • data-vs-in-time: Specify start time
  • data-vs-in-class: Specify extrance animation
  • data-vs-out-time: Specify end time
  • data-vs-out-class: Specify exit animation
<div class="vs animated pre-hide" 
    I will fade in on 6th second and fade out on 9th

This awesome jQuery plugin is developed by MA3STR0. For more Advanced Usages, please check the demo page or visit the official website.