How to use

JC Player 2.0 usage tutorial

Flash component

Using the JC Player component to create video players and playlists requires a few easy steps:

1. Open Adobe Flash CS3/CS4/CS5 and create a new AS3 file: select File > New > Flash File (ActionScript 3.0).

2. Open the Components panel (Window > Components or Ctrl + F7 for Windows/Cmd + F7 for Mac OS) and, from the JCPlayer2 folder, select the JCPlayer2 component. Drag the component and place it on the stage.

3. Next, using the JCPlayer2 Panel, you must specify the domain key(s) purchased for your JC Player license, so when you host the player on the domain for which the key was generated the watermark will not be displayed. The player will work normally without the domain key, but it will display a watermark. The most important thing to set for the player is the source XML containing the list of videos and information (title/description Ė if it is the case) that will be loaded into the JCPlayer2 component. You will also need to specify which of the JCPlayer2 templates you want to use. For this, click on the JCPlayer2 component youíve just placed on the stage to make sure it is selected and next, open the JCPlayer2 Panel (Window > Other panels > JCPlayer2 Panel).

4. If the JCPlayer2 Component object is selected, the JCPlayer2 Panel will display information for that component instance. In the JCPlayer2 Panel, set the source for the player (as the URL of your XML file or as the XML data itself). If you enter a domain key for the Internet domain where the player will be hosted, the player will not display a watermark.

Note: If you would like to use JC Player on subdomains of the main domain you specified, please contact us at:

At this point the player should work with the default template (since you didn't choose a template yet). Next, choose one of the JCPlayer2 templates you wish to use. Once you select the template you like, the JCPlayer2 Panel will import it automatically into the library.

Note: The player templates and template presets are displayed as lists of icons. Each icon is actually a screen shot of the template/preset. To see the selected template or preset in action, simply click on the Preview button in the Template tab.

5. Once you choose a JCPlayer2 template, you may customize it and then test your file by hitting Ctrl + Enter for Windows or Cmd + Enter for Mac OS.

Note: From this point onward, to create multiple players, you can simply use multiple JCPlayer2 instances on the stage. To do this, drag the JCPlayer2 Component from your library over the stage; then, use the JCPlayer2 Panel to configure them.

Note: If you would like to use a single JCPlayer2 instance for your playlists and continually change the source property to a different XML data you will need to use ActionScript 3.0 code (intermediate or advanced Flash/coding skills are required).

SWF embed

SWF files can be embedded in HTML files using one of two ways:
- embed the SWF file using the standard <object> HTML tag which works in any browser without problems
- embed the SWF file using JavaScript (for example using SWFObject) which allows for testing Flash Player version number or whether Flash Player is installed or not, and take the necessary actions in these cases.

For both methods the users are required to have Flash Player installed in their browsers (we always recommend installing the latest version from Adobe's website Ė http://get.adobe.com/flashplayer/). For the JavaScript method, users must have JavaScript enabled in their browsers but this is set by default so you shouldn't worry about it.

Note: The player will display a watermark if you do not supply a correct domain key Ė the domain key must correspond to the domain on which the player will be hosted. If you would like to use JC Player 2.0 on subdomains of the main domain you specified, please contact us at:

The easiest way to set up a player and embed it into your own HTML page is by using the JCPlayer2 online configuration panel: http://www.jcplayer.com/online-panel.html.

1. Open the JCPlayer2 online configuration page and select the template you would like to use to display your player.

2. Once the template is selected, a list of ready-made presets will open, with the default preset already selected. You can select any of the existing presets or further customize them.

3. To further customize the default or another preset you selected, simply click on the Edit settings button to open up the configuration panel and set the properties of the selected template to suit your needs.

4. After selecting templates, presets and making changes to player properties, you can click the Preview button to view the changes in the Preview window of the panel and see what the player will look like.

5. Once you are satisfied with the look of the player click the Get embed code button to get the embed code and paste it into your HTML page. The Embed Code window will open allowing you to set the path/URL to the source XML file containing the list of videos and set the embed size for your player. You can also select the type of embed code to use.

Important note: A watermark will be displayed, if you do not set the Domain keys property with the correct key (corresponding to the domain on which the player will be hosted). If you would like to use JC Player 2.0 on subdomains of the main domain you specified, please contact us at

For more information about the source XML file for the player please consult The Source XML File document found inside the JCPlayer2 package or at this URL: http://www.jcplayer.com/how-to-use.html#xml-source.

Note: All JC Player templates are available both in Flash and JavaScript. You can choose from four embed code types as follows:
- embed only the Flash version of the player using the standard HTML Object tag
- embed only the Flash version of the player using the SwfObject JavaScript method
- embed only the Javascript version of the player
- use an auto-detect code that will embed the JavaScript player only if Flash Player is not found in the browser and the Flash version of the player (.swf file) cannot be embedded

6. Finally, click the Copy code button to copy the embed code into the Clipboard and then you can paste it into your own HTML file.

Note: You can also change the values of the template parameters right in the HTML file, after you have pasted the embed code. In this case, when changing color settings, please note that the values should be specified in hexadecimal notation with the "#" character as a prefix to the color values, for JavaScript templates, or the "0x" characters for the Flash templates. However, we recommend using the JCPlayer2 online panel to make any changes to the player settings and then simply copy and paste the new embed code into your HTML file.

Structuring your player in folders

There are several situations, depending on where the .html, .xml, .swf, .js files and videos are located because SWF files look for their assets in the path relative to the HTML file that embeds them.

1. SWF file in the same folder with HTML, XML files and videos

This is the simplest case when embedding the SWF file into the HTML page. You can simply specify the file name of the .swf file and the file name of the .xml file, since they are in the same folder.

www.mydomain.com/player/player.html
www.mydomain.com/player/player.swf
www.mydomain.com/player/playlist.xml
www.mydomain.com/player/videos/ - folder for the video files
www.mydomain.com/player/images/ - folder for the cover images

<object id="player1" type="application/x-shockwave-flash" data="player.swf" width="800" height="600">
    <param name="movie" value="player.swf">
    <param name="allowFullScreen" value="true">
    <param name="bgcolor" value="#1C1C1C">
    <param name="flashvars" value="source=playlist.xml&other parameters...">
</object>

The source XML could also contain only the path relative to the .swf file, since they are in the same parent folder:

<playlist>
    <items>
        <item>
            <title><![CDATA[Title 1]]></title>
            <description><![CDATA[Description 1]]></description>
            <source>videos/video_1.flv</source>
            <hdSource>videos/video_1.mp4</hdSource>
            <sourceType>direct</sourceType>
            <image>images/image_1.jpg</image>
            <duration>120</duration>
            <startFromThis>true</startFromThis>
        </item>
        ...other playlist items...
    </items>
</playlist>

For more information about the source XML file for the player please consult The Source XML File document found inside the JC Player 2.0 package or at this URL: http://www.jcplayer.com/how-to-use.html#xml-source.

2. SWF and XML file in the same folder but with the HTML in a different folder

In this case you can use the base parameter of the <object> tag to specify a base path for the SWF file so it will know that the XML file and videos are found relative to that base path.

Example

Let's say you have a special folder where you keep your player mydomain.com/player/). This folder would contain the .swf and .xml file together with the folders for the videos and cover images. However, the .html file is located into a different folder (mydomain.com/movieplayer/). So your folder structure would look like this:

www.mydomain.com/player/player.swf
www.mydomain.com/player/playlist.xml
www.mydomain.com/player/videos/ - folder for the video files
www.mydomain.com/player/images/ - folder for the cover images
www.mydomain.com/movieplayers/player1/player1.html

In this case in the embed code you would have to specify the base path for the .swf file but the source property of the player (specified in the FlashVars parameter) can contain only the name of the XML file because the Flash player will know to load it from the specified base path:

<object id="player1" type="application/x-shockwave-flash" data="player.swf" width="800" height="600">
    <param name="movie" value="player.swf">
    <param name="allowFullScreen" value="true">
    <param name="bgcolor" value="#1C1C1C">
    <param name="base" value="http://www.mydomain.com/player/">
        or
    <param name="base" value="../../player/">
    <param name="flashvars" value="source=playlist.xml&other parameters...">
</object>

3. All the player assets are found in different folders

In this case not only the .html and .swf files are in different folders, but the .xml file and images are also placed in different folders than the one containing the .swf file:

www.mydomain.com/swffiles/player.swf
www.mydomain.com/xmlfiles/playlist.xml
www.mydomain.com/videos/ - folder for the video files
www.mydomain.com/images/ - folder for the cover images
www.mydomain.com/movieplayers/player1/player1.html

In this case we recommend using absolute paths for all your files: path to .swf and .xml files and also the path specified in the .xml file for each of the images, so you donít need the base path specified.

<object id="player1" type="application/x-shockwave-flash" data="http://www.mydomain.com/swffiles/player.swf" width="800" height="600">
    <param name="movie" value="http://www.mydomain.com/swffiles/player.swf">
    <param name="allowFullScreen" value="true">
    <param name="bgcolor" value="#1C1C1C">
    <param name="flashvars" value="source=http://www.mydomain.com/xmlfiles/playlist.xml&other parameters...">
</object>

The XML file would contain the absolute paths of the videos:

<playlist>
    <items>
        <item>
            <title><![CDATA[Title 1]]></title>
            <description><![CDATA[Description 1]]></description>
            <source>www.mydomain.com/videos/video_1.flv</source>
            <hdSource>www.mydomain.com/videos/video_1.mp4</hdSource>
            <sourceType>direct</sourceType>
            <image>http://www.mydomain.com/images/image_1.jpg</image>
            <duration>120</duration>
            <startFromThis>true</startFromThis>
        </item>
        ...other playlist items...
    </items>
</playlist>

For more information about the source XML file for the player please consult The Source XML File document found inside the JC Player 2.0 package or at this URL: http://www.jcplayer.com/how-to-use.html#xml-source.

Note: You can also set up the player by modifying the values from the FlashVars parameter, directly in your HTML file where the SWF file is embedded. In this case, when changing color settings, please note that the values should be specified in hexadecimal notation with the "0x" characters as a prefix to the color values. For JavaScript players, the colors are specified as hexadecimal values but with the "#" character as a prefix. However, we recommend using the JCPlayer2 online panel to make any changes to the player settings and then simply copy and paste the new embed code into your HTML file.

JavaScript embed

Important note: The JavaScript versions of the JC Player 2.0 templates will work only in HTML5 compatible browsers. In your .htaccess file you have to specify the correct Mime-Types for your video files, else the player will be unable to play them. See an example below:

AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogg

Note: The JavaScript versions of the JC Player 2.0 templates will not work in Google Chrome when tested locally, on your computer, due to Google Chrome's security sandbox. To test the JavaScript players with Google Chrome we recommend uploading your test files to the web.

The easiest way to set up a playlist and embed it into your own HTML page is to use the JCPlayer2 online configuration panel: http://www.jcplayer.com/online-panel.html.

1. Open the JCPlayer2 online configuration page and select the template you would like to use to display your player.

2. Once the template is selected, a list of ready-made presets will open, with the default preset already selected. You can select any of the existing presets or further customize them.

3. To further customize the default or another preset you selected, simply click on the Edit settings button to open up the configuration panel and set the properties of the selected template to suit your needs.

4. After selecting templates, presets and making changes to player properties, you can click the Preview button to view the changes in the Preview window of the panel and see what the player will look like.

5. Once you are satisfied with the look of the player, click the Get embed code button to get the embed code and paste it into your HTML page. The Embed Code window will open allowing you to set the path/URL to the source XML file containing the list of videos and set the embed size for your player. You can also select the type of embed code to use. For JavaScript only players, you should select the JavaScript option.

Important note: A watermark will be displayed, if you do not set the Domain keys property with the correct key (corresponding to the domain on which the player will be hosted). If you would like to use JC Player 2.0 on subdomains of the main domain you specified, please contact us at

For more information about the source XML file for the player please consult The Source XML File document found inside the JCPlayer2 package or at this URL: http://www.jcplayer.com/how-to-use.html#xml-source.

Note: All JC Player templates are available both in Flash and JavaScript. You can choose from four embed code types as follows:
- embed only the Flash version of the player using the standard HTML Object tag
- embed only the Flash version of the player using the SwfObject JavaScript method
- embed only the Javascript version of the player
- use an auto-detect code which will embed the JavaScript player only if Flash Player is not found in the browser and the Flash version of the player (.swf file) cannot be embedded

7. Finally, click the Copy code button to copy the embed code into the Clipboard and then you can paste it into your own HTML file.

Note: You can also change the values of the template parameters right in the HTML file, after you have pasted the embed code. In this case, when changing color settings, please note that the values should be specified in hexadecimal notation with the "#" character as a prefix to the color values, for JavaScript templates, or the "0x" characters for the Flash templates. However, we recommend using the JCPlayer2 online panel to make any changes to the player settings and then simply copy and paste the new embed code into your HTML file.

JavaScript template main properties

The JC Player templates have a set of parameters that are used to set up the players (the way they look and work). Each JC Player template has a PDF document describing each property, found in the documentation folder of the package. The JavaScript versions of the JC Player have a set of extra parameters used when embedding the templates in the HTML pages:

Property name Description
appendToID The id of the HTML element into which the player will be embedded. In this case we recommend adding the players into DIV elements. The players will be displayed after the element's content.
domainKeys A list of hash keys generated for the Internet domains on which the player will be hosted. The list should contain at least one key corresponding to an Internet domain.

Note: If such a domain key is not specified, the player will always display a watermark. When the player is tested within the Adobe Flash Professional IDE or viewed on a local computer, the watermark will always be displayed because the player is not hosted on an Internet domain.

For more information about the domain keys please consult the User Manual.
height The height of the JCPlayer2 player.
loop Specifies whether the playlist will loop continuously or play only once.
mute Specifies whether the player is initially muted or not.
playMode Indicates how the videos from the playlist are played. Possible values are:
- autoplay - JC Player starts playing the videos automatically without user input
- onDemand - JC Player starts playing the first video only when the user starts it but the rest of the videos from the playlist will start automatically without user input
- noAutoplay - JC Player starts playing each video only when the user starts them.

Note: If the player is displayed on iPad or iPhone, it will always use the noAutoplay option, because these devices donít support the autoplay mode.
scaleMode The type of scaling applied on the loaded videos and cover images. Possible values are noScale, maintainAspectRatio, exactFit and scaleCrop.
shuffle Specifies whether the videos are played randomly.
source The URL of the source XML file containing the list of videos for the JC Player2 template. It can also receive the URL of a single video file.
volume Sets the volume level for the video.
width The width of the JCPlayer2 player.

Example

$.jcPlayerEmbedCanvas.init({
    appendToID:"TemplateNameRandomID",
    domainKeys:"27hd8m731bca8",
    source: 'source.xml',
    scaleMode:"maintainAspectRatio",
    playMode:"onDemand",
    loop:"true",
    shuffle:"false",
    volume:"80",
    width:800,
    height:600,
    playerColor1:"#303030",
    playerColor2:"#FF8B00",
    playerColor3:"#FFFFFF",
    movieBackgroundColor:"#333333",
    backgroundVisible:true,
    autoHideControls:false,
    playButton:true,
    navigationButtons:true,
    fullscreenButton:true,
    ...other parameters...
});

Structuring your player in folders

Each JavaScript JCPlayer2 template uses a JavaScript file (.js) having the same name as the template name, placed in the same folder with the sample HTML file and the source XML file. This is the structuring method used for the HTML package provided with the JC Player 2.0 package.

However, it is possible to place the video and image files in different folders, if you want the players to follow your own rules of structuring the website (for example, all videos into a single folder and all the .js files into another folder).

Example

$.jcPlayerEmbedCanvas.init({
    appendToID:"TemplateNameRandomID",
    source:"http://www.mydomain.com/assets/source.xml",
    width:800,
    height:600,
    ...other parameters...
});

If the videos and cover images used in the playlist are also placed into different folders than the HTML file and JavaScript player, then we recommend specifying the path to the videos and images in the XML file using absolute paths. For more information about the source XML file for the player please consult The Source XML File document found inside the JC Player 2.0 package or at this URL: http://www.jcplayer.com/how-to-use.html#xml-source.

Learn how to build a source XML

The source XML contains a list of item elements (an element is identified by a XML tag specified between the "<" and ">" characters), each item element (tag) having extra child elements that represent the URL for the videos, text for the title and description and other extra parameters the user might require. So a typical source XML file might look like this:

<playlist>
    <items>
        <item>
            <source>URL for the video 1 (mandatory)</source>
            <sourceAlt>URL for the alternative video 1</sourceAlt>
            <sourceAlt2>URL for the second alternative video 1</sourceAlt2>
            <hdSource>URL for the HD video 1</hdSource>
            <hdSourceAlt>URL for the alternative HD video 1</hdSourceAlt>
            <hdSourceAlt2>URL for the second alternative HD video 1</hdSourceAlt2>
            <sourceType>The type of video 1 (mandatory)</sourceType>
            <startFromThis>If itís true, video 1 will play first</startFromThis>
            <duration>The total duration of video 1 in seconds</duration>
            <title><![CDATA[[The title for video 1 goes here]]></title>
            <description><![CDATA[Description for video 1 goes here]]></description>
            <image>URL for cover image 1</image>
        </item>
        <item>
            <source>URL for the video 2 (mandatory)</source>
            <sourceAlt>URL for the alternative video 2</sourceAlt>
            <sourceAlt2>URL for the second alternative video 2</sourceAlt2>
            <hdSource>URL for the HD video 2</hdSource>
            <hdSourceAlt>URL for the alternative HD video 2</hdSourceAlt>
            <hdSourceAlt2>URL for the second alternative HD video 2</hdSourceAlt2>
            <sourceType>The type of video 2 (mandatory)</sourceType>
            <startFromThis>If itís true, video 2 will play first</startFromThis>
            <duration>The total duration of video 2 in seconds</duration>
            <title><![CDATA[[The title for video 2 goes here]]></title>
            <description><![CDATA[Description for video 2 goes here]]></description>
            <image>URL for cover image 2</image>
        </item>
        <item>
            <source>URL for the video 3 (mandatory)</source>
            <sourceAlt>URL for the alternative video 3</sourceAlt>
            <sourceAlt2>URL for the second alternative video 3</sourceAlt2>
            <hdSource>URL for the HD video 3</hdSource>
            <hdSourceAlt>URL for the alternative HD video 3</hdSourceAlt>
            <hdSourceAlt2>URL for the second alternative HD video 3</hdSourceAlt2>
            <sourceType>The type of video 3 (mandatory)</sourceType>
            <startFromThis>If itís true, video 3 will play first</startFromThis>
            <duration>The total duration of video 3 in seconds</duration>
            <title><![CDATA[[The title for video 3 goes here]]></title>
            <description><![CDATA[Description for video 3 goes here]]></description>
            <image>URL for cover image 3</image>
        </item>
        ...
        <item>
            <source>URL for the video N (mandatory)</source>
            <sourceAlt>URL for the alternative video N</sourceAlt>
            <sourceAlt2>URL for the second alternative video N</sourceAlt2>
            <hdSource>URL for the HD video N</hdSource>
            <hdSourceAlt>URL for the alternative HD video N</hdSourceAlt>
            <hdSourceAlt2>URL for the second alternative HD video N</hdSourceAlt2>
            <sourceType>The type of video N (mandatory)</sourceType>
            <startFromThis>If itís true, video N will play first</startFromThis>
            <duration>The total duration of video N in seconds</duration>
            <title><![CDATA[[The title for video N goes here]]></title>
            <description><![CDATA[Description for video N goes here]]></description>
            <image>URL for cover image N</image>
        </item>
    </items>
</playlist>

The <item> element contains all the information regarding each video from the playlist.

Note: The italicized text in the above example should be replaced by your actual video and image URLs, titles and descriptions.

Note: Click here to view a sample source XML file.

<source>
This element is the most important one and it is mandatory. This element contains the URL of the videos. This is where the player will look for the path and file name of the videos. If this value is missing, the player will not load any movies.

<sourceAlt>
This element contains the URL of the alternative videos. This is where the player will look for the path and file name of the alternative videos, if it canít load the videos specified in node <source>.

<sourceAlt2>
This element contains the URL of the second alternative videos. This is where the player will look for the path and file name of the second alternative videos, if it canít load the videos specified in node <source> and <sourceAlt>.

<hdSource>
This element contains the URL of the HD videos. This is where the player will look for the path and file name of the HD videos.

<hdSourceAlt>
This element contains the URL of the alternative HD videos. This is where the player will look for the path and file name of the alternative HD videos, if it canít load the videos specified in node <hdSource>.

<hdSourceAlt2>
This element contains the URL of the second alternative HD videos. This is where the player will look for the path and file name of the second alternative HD videos, if it canít load the videos specified in node <hdSource> and <hdSourceAlt>.

Note: The URL of the videos and cover images can be specified either as absolute path Ė the full path containing the protocol (http://), domain name (www.mysite.com) and directory path (/player/videos/, /player/images/) - or the relative path to the videos and images Ė relative to another location on the hosting server. If you are unsure of how to specify the path/URL to the videos and images, we recommend using the absolute path, that is, specifying the complete path/URL to the video and image to avoid confusion.

Example

- absolute path: http://www.mydomain.com/player/videos/video01.mp4
- relative path: videos/video01.mp4 Ė the path is relative to the player folder on the root of the domain (http://www.mydomain.com/player/).

<sourceType>
This element contains the type of the videos. The player supports the following media file types:
- direct - use this type for standard video formats with progressive download
- youtube - use this type when you are embedding YouTube videos
- rtmp - use this type if you are using RTMP streaming with a media server
- sound - use this type for audio files
This element is important and it is mandatory.

<streamer>
This element should contain the server + path of your RTMP application. Use this element only if the sourceType is "rtmp".

Example

If the video has the following location: rtmp://www.myserver.com/myproject/videos/video.mp4
you will have in the source xm file:

<source>videos/video.mp4</source>
<streamer>rtmp://www.myserver.com/myproject/</streamer>

<startFromThis>
This element contains a Boolean value and it indicates whether that item will be played first. Use this element if you donít want to play the first video item from XML first (the 5th video for example).

<duration>
This element contains the total duration of the videos in seconds. This value is important, because if not specified, the player will display 00:00 as total duration until that video starts loading.

<title> and <description>
These two elements contain the title and description for the videos. The text in these two elements should be added as CDATA text.

Example

<description><![CDATA[This is a description of the video.]]></description>

<image>
This element contains the URL for the cover images which are displayed until the videos begin to play. If this element is not specified, a default cover image will be displayed in the player.