See the tutorial to learn about basic usage.
Eventually I realized that I could get most of what I needed simply by enabling classes at the proper intervals in a video, and allowing CSS to do most of the heavy lifting.
- Instapoppin's only dependency is popcorn.js without any plugins.
data-active-during attribute is pretty flexible, and you can specify time intervals in a variety of formats. Here's some example values:
2-6means seconds two thru six.
1:02-1:06means one minute and two seconds thru one minute and six seconds.
32-means thirty-two seconds thru the end of the media.
1-2, 3-5means seconds one thru two and seconds three thru five.
-0.5means the beginning of the media thru half a second in.
By default, Instapoppin' assumes the first media element in the page (audio or video) is the one to be synchronized against. However, if you have multiple media elements on the page, you can give one of them the
primary-sync-source class to force Instapoppin' to use it.
I've attempted to make Instapoppin' provide good error feedback if it gets confused. Check your browser's error console if it seems to behave oddly. And if you're not sure what's wrong, feel free to file a bug.