----------------------------------------------------------------------
---------------- How to use the Video Plugin in AXEL  ----------------
----------------------------------------------------------------------

COMPATIBILITY:

Tested on Firefox (3.5) 

Summary
=======

• Link plugin syntax in templates
• Declaration
• Parameters
• Styling
• Packaging and deployment
• Source files
• Style sheets

Video plugin syntax in templates
================================

    
Declaration
~~~~~~~~~~~

The video plugin currently has no parameters (this will happen soon). You may either leave the content of the use tag empty or give the editor a default content.

The default content may be given as follows:

<xt:use types="video" label="yourLabel">url.to.the/video</xt:use>

or

<xt:use types="video" label="yourLabel">
	code snippet
</xt:use> a photo, their content will be the empty string, otherwise it will be the URL of the uploaded photo as returned by the server.

    
Parameters
~~~~~~~~~~

You can use param="key1=value1;key2=value2..." to define some lens parameters.
Supported parameters:

 * lens parameters
 * lang {string} The lang parameter controls the lang of the flash GUI. It must respect currently the youtube's format (en_GB, fr_FR)

    
Styling
~~~~~~~

The video editor requires the two following elements to be styled. The best place place to declare the corresponding rules in the global AXEL CSS file which is included with library. The development version is in axel/axel.css

Video handler : "not yet supported"

Lens handler (video lens div container) : .xtt-lens

The "xtt-lens" attribute is set on the <div> that serves as the video editor lens container. This class is supposed to be set on all the lenses in use in a template hence the styling rule contains generic rules to all lenses.

    
Packaging and deployment
========================

    
Source files
~~~~~~~~~~~~

The video plugin editor is defined in src/plugins/video.js; it also requires one device: src/plugins/lensdevice.js. You must include these four files into the deployment version of the library (e.g. xtf.js) such as the one generated by the ant script build.xml in the scripts folder.

If you include these 2 javascript files individually into your application, you must do it in the following order:

<script type="text/javascript" src="src/plugins/lensdevice.js"></script>
<script type="text/javascript" src="src/plugins/video.js"></script> 

The video plugin editor also needs different resources at runtime which are in the bundles/video folder. These are different icons used by the library and a video.css (soon...) file.

The simpler setup is to copy the bundles/video folder inside the bundles folder which must be pointed to by the base PATH given to the xtiger.util.Form( base ) object that you use to transform the template.

    
Style sheets
~~~~~~~~~~~~

The target document that contains the template must include the bundles/video/video.css style sheet (once it exists). For instance if you are using an iframe to host the template, it must include the previous style sheet such as in the following example (adapt the href path to your environment):

<link rel="stylesheet" href="../bundles/video/video.css" type="text/css"></link> 	

Alternatively you can also inject the style sheet inside the targer document at load time (see injectStyleSheet in xtiger.util.Form), or you can directly include the style sheet in the target document before importing the template.