jQuery VideoSync

Sync page content with html5 video

Features

  • Updates elements by video timer
  • Visually connects video with rest of the page
  • Puts accents on video content
  • Adds interactivity

How it works

  • Set start- and end- time triggers
  • VideoSync will add some class to elements
  • It can show, hide or animate elements
Demo Time
  • Tough situation
  • But not with my car
  • Eat that!
  • Wow, he rocks ^_^

Set it up

  • Add "vs-source" class to your video and "vs" to animated elements:
    <video class="vs-source"></video>...<div class="vs">Hello</div>
  • Specify start time and class name as "data-vs-in-" attributes for desired elements, and videsync will add this class when video timer triggers:
    <div class="vs" data-vs-in-time="4.2" data-vs-in-class="fadeIn">Hello</div>
  • If you want to have ending effects, you can also set "data-vs-out-" attributes:
    data-vs-out-time="9" data-vs-out-class="fadeOut"

Minimal Example

Animations

jQuery-Videosync works especially well with Animate.css. Just include animate.css file to your html, choose desired effect on Animate.css, and specify it as 'vs-..-class' attribute: data-vs-in-class="slideInLeft"

Get it

It's so simple. Download, add to page, set desired attributes.

Follow on Github: https://github.com/MA3STR0/jquery-videosync

Download

Complete: jquery.videosync.js
 Minimized: jquery.videosync.min.js