Ribbon Player - HTML5 Animated Video Player

Robust HTML5 player that supports 99% of browsers

When 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 styles to choose from.Check out the video preview to see it in action!

Ribbon Player doesn’t just look awesome. It is built on the wonderful open source library, video.js. The player has HTML5 awesomeness for new browsers/mobile devices and falls back to a Flash player for older browsers.

Test it!

To see the ribbon animation, please view the video preview above. If you want to test the player, head to the limited example.

Please note that the animation is not complete in this example, and is only provided so you can test out the player.

Compatibility

• Chrome – Full animation, HTML 5 support
• Safari – Full animation, HTML 5 support
• Firefox – Full animation, HTML 5 support
• IE9 – No animation, HTML 5 support
• IE8/IE7 – Basic appearance, Flash support
• Works in any mobile device that supports HTML5 video (Android, iPhone, iPad, Blackberry)

Features

• Works in almost any browser, including your favourite mobile devices
• Unique CSS3 “ribbon wrap” effect on hover
• Optional “lights out” feature when video plays
• Video automatically stops playing if another one is played
• 80 colour/style combos! Go crazy!
• Simple setup
• Great documentation, even with some tips on encoding

Compatible with Ribbon Wrap

Ribbon Player is compatible with Ribbon Wrap, another item by me. Ribbon Wrap is the sister to Ribbon Player, incorporating the beautiful ribbon animation into the rest of your site, use it for headers, titles, descriptions, etc.

Credits

• jQuery – The ever popular javascript library (hosted by Google).
• Video.js – Fantastic open source video library the player is built on (hosted by Level 3).
• Big Buck Bunny – Trailer video used in examples.
• Sintel – Trailer video used in examples.
• Ultimate CSS Gradient Editor – Used to generate all CSS3 gradients in ribbons.

Updates:

• 1.1 – 28.06.2012 – Updated “rw-player.js” – Fixed “lights out” z-index bug.