How to Embed ZenQT Player
Step 1 - Unzip and upload the latest version of ZenQT Player to a folder in your website, for example http://www.yourdomain.com/zenqt/.
Step 2 - Place the following code into the head of your page.
<script type="text/javascript" src="zenqt/zenqt.js"></script>
This example assumes ZenQT Player has been uploaded to the folder "zenqt".
Step 3 - Place the following code into the body of your page, at the position where you want the media to be displayed.
<div class="zenqt"></div>
<script type="text/javascript">
var zenqt = new ZenQT("[media_url]", [width], [height], "[skin_url]", "[license_url]");
if(zenqt.is_media_supported()) {
[optional_commands]
zenqt.embed();
} else {
//
// Alternative player code here (ie. JW Player)
//
}
</script>
[media_url] - replace with the URL for your media.
[width] - set a number for the width of your player.
[height] - set a number for the height of your player.
[skin_url] - replace with the URL for your skin.
[license_url] - replace with the URL for your license.
The first line is a marker which defines where the ZenQT Player will be placed. The following Javascript then creates a new ZenQT object, checks if the media is supported, executes optional commands and finally embeds the player.
If the media is not supported, you can embed a backup player (ie. JW Player). For example, ZenQT Player will not play FLV files, but JW Player will. By embedding JW Player as a backup, the media will be played. Also you can use the same skin, keeping the look and feel consistent.
A Note About Using JW Player Skins
JW Player skins are stored in ZIP files. ZenQT Player offers two ways of loading JW Player skins:
- On a PHP server you can load zipped skin files by placing zenqt_unzip.php into the same directory as your skins and then refer to the skin's ZIP file.
- If the above is not possible, you can unzip skins before uploading and then load the skin by refering to it's XML file.
To view the list of JW Player skins available, please visit the
JW Player Skins Page.
Optional Commands
ZenQT provides optional commands to help you customise your player.
zenqt.set_preview(preview_url);
Displays a preview screen before the media is played. preview_url should be the url of a GIF, JPG or PNG image.
zenqt.set_canvas_color(color);
Sets the color of the canvas. color should be a valid HTML formatted color (default is #000000).
zenqt.set_scaling(scaling_type);
Scales the media in respect to the canvas area. scaling_type can be set to any of the following:
"aspect_fit" - Scales the media to fit the canvas while maintaining the media's aspect ratio (default).
"crop_fit" - Scales the media to fit the canvas by cropping the media where neccessary.
"stretch_fit" - Scales the media to fit the canvas by stretching the media to fit the canvas aspect ratio.
"original" - Keeps the media at it's original size.
zenqt.set_autoplay(true_or_false);
Determines if the media should automatically play.
true - Autoplay on.
false - Autoplay off (default).
Full Example
Here is a full example showing all the optional commands in use...
<script type="text/javascript" src="zenqt/zenqt.js"></script>
<div class="zenqt"></div>
<script type="text/javascript">
var zenqt = new ZenQT("zenqt/video/azure.mp4", 300, 246, "zenqt/skins/zen_minima.zip", "zenqt/license.txt");
if(zenqt.is_media_supported()) {
zenqt.set_preview("zenqt/video/azure.jpg");
zenqt.set_canvas_color("#FFFFFF");
zenqt.set_scaling("crop_fit");
zenqt.set_autoplay(false);
zenqt.embed();
} else {
//
// Alternative player code here (ie. JW Player)
//
}
</script>
Having Trouble?
Finally...
Thank you for choosing ZenQT Player!
