s-c edited this page Mar 13, 2014 · 3 revisions

Klynt Player

Klynt Player is a cross-browser, JavaScript engine to playback rich-media sequences, which can be edited with Klynt Editor. it consists of three major parts:

  • A sequence rendering engine that displays the sequences created in the Editor in a sequence container.
  • A footer that is displayed below the sequences container.
  • A menu that contains different widgets.

The player also defines the MiniPlayer mode that allows it to be embedded in a smaller space in other webpages.

In the Pro edition of Klynt, it is possible to add iframes to sequences in the editor. These iframes can use the iframe API to add customised functionality.

How to customise the player

You can refer to the document CSS Architecture for documentation on how to customise the player.

Demos and documentation

Used libraries

The player uses the following libraries:

  • Timesheets.js: implementation of SMIL-Timing and SMIL-Timesheets
  • MediaElement.js: HTML5 <audio> or <video> player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers.
  • Sigma: Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.
  • jQuery for HTML document traversal, manipulation, event handling and animation.
  • Mustashe for templates.
  • Modernizr for detecting HTML5 and CSS3 features in the browser.
  • Lazyload for loading js and css files on demand.
  • jQuery UI for tooltips.
  • jQuery's Hammer plugin for multitouch gestures.
  • jQuery's nanoscroller plugin for Mac OS X Lion-styled scrollbars.
  • jQuery's cookie plugin for reading, writing and deleting cookies for tracking viewed sequences.
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.