WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Media

Ribbon Player - HTML5 Animated Video Player

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


Ribbon Player - HTML5 Animated Video Player - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

FolLow Envato

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.

Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
25 June 12

Last Update:
N/A

High Resolution:
No

Compatible Browsers:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:
HTML5

Keywords

eCommerce, eCommerce, All Items, android, animation, colors, css3, customisable, html5, ipad, iphone, mobile, player, ribbon, video, videoJS, wrap