Fork me on GitHub

jquery-singalong by yayquery

An annotate plugin for html5 <audio> and <video>

License

WTFPL

Audio Demo

Singalong plugin is responsible for showing the annotations at desired start and stop times. This demo includes the very beta bouncyball plugin.
b
Come on, come on everybody, lets go. Do do do, do do do... ...Do do do, do do do... do do do-do-doot. do do do-do-doot. douh doot douh doot douh doot ! yayQuery, yayQuery A whole lot of YAY and a query too So come on, lets go, because we got a show for youuuu <3

Video demo

OMFG a tree!
grass ↓↓↓↓ !
These are called cattails or Typha. Wikipedia - Typha
His name is Steven. That may be a lie.

He may be about to be hit. That may also be a lie...
These annotations are just plain-jane divs. They are fully styleable and eventable.

Go crazy.

View the source to see how we use html5 data- attributes to control when these divs show.
← Poke!
Thanks for checking it out. Follow us on twitter or hit up yayquery.com for more awesomeness.

Annotate <audio> and <video>

the jQuery annotate plugin can add full HTML annotations to HTML5 <video> or <audio> elements.

It uses the HTML5 media elements API. It can be used for:

This plugin was developed during Boston music hack day and won some awesome prize for being sweet. We also totally broke the polling software as it didn't escape angle brackets and this project title had an <audio> tag in it. Whoops!

This will be used in yayQuery podcast, a jQuery podcast. yayQuery theme by Jonathan Neal.

This only works in browsers that support the HTML5 media elements.

get the source code on GitHub : yayquery/jquery-singalong