This time I will share jQuery Plugin and tutorial about jQuery Plugin To Sync Html5 Video With Content – VideoSync, hope it will help you in programming stack.
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.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="jquery.videosync.min.js"></script> |
2. Include the animate.css for additional CSS3 animations (OPTIONAL).
1 |
<link rel="stylesheet" href="animate.min.css"> |
3. Embed an Html5 video into your webpage.
1 |
<video class="vs-source" controls> |
2 |
<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
1 |
<div class="vs animated pre-hide" |
3 |
data-vs-in-class="fadeInDown" |
5 |
data-vs-out-class="fadeOutDown" |
7 |
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.
