DOWNLOAD SKINS TUTORIALS DOCS SUPPORT BUY

Establishing a Player with HTML

 

Each page you wish to include Wimpy on requires 2 parts, highlighted in red below.

<html>
<head>
<title>My Page</title>
<!-- 1. Wimpy Engine -->
<script src="/media/wimpy.js"></script>
</head>

<body>
<!-- 2. Wimpy Player Instance -->
<div data-wimpyplayer></div>
</body>
</html>

NOTE: The URL in the examples use the recommended "from the root" style.

 

 

1 Wimpy Engine

The Wimpy Engine is the "wimpy.js" javascript file and is responsible for:

  1. Rendering players into the page.
  2. Controlling media playback.

To incorporate the Wimpy Engine into your page, use a <script> tag and set the source (src) attribute to the URL to the "wimpy.js" file located in the Wimpy Installation folder on your web server.

Example

<script src="/media/wimpy.js"></script>

 

This tag should go into the HEAD portion of your page (anywhere between the opening <head> and closing </head> tags on your page.)

NOTES
• You only have to reference the wimpy.js file one time. 
• The URL in the example is using the recommended "from the root" style.
• Placing the reference into the <head> is recommended, but NOT required. Under certain circumstances placing the reference at the bottom of the page (just before the closing </body> tag) may help with any issues related to conflicts with other scripts.

 

2Wimpy Player Instance

A Player Instance is a simple <div> tag with a special data-wimpyplayer attribute. A Player Instance serves two purposes:

  1. Establish where a player should be rendered on the page.
  2. Contains configuration instructions for each player, such as size, skin, and other options.

The special data-wimpyplayer atribute acts as a flag to signify that this particular <div> tag is a Wimpy Player. The Wimpy Engine renders a usable player INSIDE the Player Instance <div> when the page is loaded in a web browser.

Example

<div data-wimpyplayer></div>


A Player Instance can appear anywhere between the opening <body> and closing </body> tags on your page.

The Wimpy Engine will render a player wherever a Player Instance appears in the page. You can incorporate as many Player Instances into your page as you wish.

 

NOTES
• The <div> should have a classic "closing" </div> tag. Do NOT use the short-hand <div /> tag closer. 
• Since the actual player is renederd INSIDE the Player Instance <div>:
    - Any text or code located inside the Player Instance <div> will be retained.
    - Most of the CSS applied to the Player Instance <div> will be retained. See "Player Positioning" and "Player Sizing" for more information on CSS rules applied to the Player Instance.

 

 

Next >