Ribbon Participant - HTML5 Lively Video Participant

Robust HTML5 player that supports 99% of browsers

while you hover over the video, the controls animate in like a ribbon, wrapping around the video. it is incredibly customisable with 8 different colours and 5 additional types to select from.Check out the video preview to peer it in motion!

Ribbon Participant doesn’t simply look superior. it is built on the wonderful open supply library, video.js. The participant has HTML5 awesomeness for new browsers/mobile gadgets and falls again to a Flash participant for older browsers.

Take A Look At it!

to look the ribbon animation, please view the video preview above. if you happen to wish to take a look at the player, head to the restricted instance.

Please word that the animation isn't complete on this example, and is solely supplied so you can take a look at out the player.

Compatibility

• Chrome – Complete animation, HTML FIVE improve
• Safari – Complete animation, HTML 5 fortify
• Firefox – Full animation, HTML 5 make stronger
• IE9 – No animation, HTML FIVE make stronger
• IE8 /IE7 – Basic appearance, Flash enhance
• Works in any cellular device that supports HTML5 video (Android, iPhone, iPad, Blackberry)

Features

• Works in nearly any browser, including your favorite mobile devices
• Distinctive CSS3 “ribbon wrap” effect on hover
• Not Obligatory “lights out” feature whilst video performs
• Video automatically stops taking part in if any other one is played
• 80 color/style combinations! Move crazy!
• Easy setup
• Great documentation, regardless of some tips on encoding

Appropriate with Ribbon Wrap

Ribbon Participant is suitable with Ribbon Wrap, every other merchandise via me. Ribbon Wrap is the sister to Ribbon Participant, incorporating the pretty ribbon animation into the remaining of your website, use it for headers, titles, descriptions, etc.

Credits

• jQuery – The ever standard javascript library (hosted by means of Google).
• Video.js – Improbable open supply video library the participant is built on (hosted by Level THREE).
• Massive Buck Bunny – Trailer video utilized in examples.
• Sintel – Trailer video used in examples.
• Final CSS Gradient Editor – Used to generate all CSS3 gradients in ribbons.

Updates:

• 1.1 – 28.06.2012 – Up To Date “rw-participant.js” – Fixed “lights out” z-index bug.

FULL DOWNLOAD