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>
<!-- 2. Wimpy Player Instance --> <div data-wimpyplayer></div>
NOTE: The URL in the examples use the recommended "from the root" style.
1 Wimpy Engine
- Rendering players into the page.
- 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.
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:
- Establish where a player should be rendered on the page.
- 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.
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.