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">
</video>

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" 
    data-vs-in-time="6" 
    data-vs-in-class="fadeInDown" 
    data-vs-out-time="9" 
    data-vs-out-class="fadeOutDown"
    >
    I will fade in on 6th second and fade out on 9th
</div>

---

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