Establishing a Player with HTML


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

<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.


<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.)

• 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.


<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.


• 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 >