Tools & Guidelines
Embedding ccPlayer in a Web Page

Previous | Next | ccPlayer Help Contents | ccPlayer Home

A Flash SWF object, such as ccPlayer, is embedded on a web page using <object> and <embed> tags. To bypass issues related to embedding active content directly in the page's html, SWFObject and AC_RunActiveContent use javascript to generate the <object> and <embed> tags as the page is loaded. This is meant to describe various processes that have been typically used to load the ccPlayerAS3.swf on a web page.

There are two sets of parameters that are used with ccPlayer. The first set, shown below, are general parameters for Flash objects. The other set of parameters, which are unique to ccPlayer are passed to the player using the Flashvars parameter. These parameters are described in more detail in ccPlayer Flashvars Parameters.

General Flash Parameters

• allowFullscreen – This must be set to true in order for ccPlayer to be displayed in fullscreen mode.
• allowScriptAccess - This needs to be set to true in order for Javascript to access ccPlayer's public methods.
• wmode – This must be set to window (the default for this parameter), in order for the screen-reader accessibility features to work. Any other value will result in ccPlayer being hidden from screen-reader users.
• scale – Setting this will have no effect. ccPlayer is set up so its content will not scale. (Scaling is not related to fullscreen viewing.) The width and height parameters below are used to expand or trim ccPlayer's visible area to accommodate various sizes of media. See Setting the size of ccPlayer.
• width – ccPlayer's viewable width.
• height – ccPlayer's viewable height, including media, captions and controls.
• bgcolor – Color visible under the ccPlayer controls when they slide up, hiding the captions.
• flashvars – Used to pass the parameters that are unique to ccPlayer. See ccPlayer Flashvars Parameters.

back to top

Setting the size of ccPlayerAS3

The size of ccPlayer depends on the media being played in it. ccPlayer has two sets of dimensions that it uses to set up the positioning and display of its objects (media, controls, captions). The general width and height parameters, listed above, are used to set the outer dimensions of the ccPlayer, in other words, the 'footprint' that ccPlayer takes up on the web page. Internally, ccPlayer uses the ccMediaWidth and ccMediaHeight flashvars parameters to set the size of the media area that appears above the controls and caption area. (See ccPlayer Flashvars Parameters.)

To determine the outer dimensions, the width of ccPlayer's footprint is determined by the widest object, which is either the media or the controls. Determining the height is a little more complex. It is determined by taking the height of the media and adding to it the height of the caption area and controls. Currently, the caption area height is fixed at 52 pixels. For an example, if a widescreen video (480 px x 270px) is being displayed with captions, using the default controls (52 pixels), the height that would be used would be 374 (270 pixels for video + 52 pixels for captions + 52 pixels for controls).

In the coding examples below, the width of the player will be set to 480 pixels (the width of the default controls and video sample). The height will be set to 464 pixels, which the height of the video (360 pixels), plus the height of the caption area (52 pixels) and the height of the default controls (52 pixels).

back to top

Adding Flashvars Parameters

Each flashvars parameter is added using name=value combinations separated by '&'. For example, to playback the video 'car.flv' with dimensions of 480x360 and an external caption file, 'car.dfxp.xml', the flashvars string would be:

ccMediaName=car.flv&ccMediaHeight=360&ccMediaWidth=480&ccCaptSourceType=external&ccCaptionSource=car.dfxp.xml

The flashvars string can either be included in the movie parameter by appending it to the swf object reference, following a question mark (?):

<param name="movie" value="ccPlayerAS3.swf?ccMediaName=car.flv&ccMediaHeight=360&ccMediaWidth=480&ccCaptSourceType=external&ccCaptionSource=car.dfxp.xml" />


or it can be added as a separate parameter:

<param name="movie" value="ccPlayerAS3.swf />
<param name="flashvars" value="ccMediaName=car.flv&ccMediaHeight=360&ccMediaWidth=480&ccCaptSourceType=external&ccCaptionSource=car.dfxp.xml" />


ccPlayer Flashvars Parameters provides a complete list of ccPlayer's flashvars parameters.

back to top

Embedding ccPlayer using <object> and <embed>

back to top

Embedding ccPlayer using SWFObject

The SWFObject is continually being updated. The latest version and documentation can be found at http://code.google.com/p/swfobject/.

Example code to be placed in the header for SWFObject:



This is placed in the body of the page where ccPlayer should appear:



back to top

Embedding ccPlayer using AC_RunActiveContent

As of the Flash CS3 package, publishing a Flash project's html page would also generate an AC_RunActiveContent.js javascript file. When this file is loaded, the javascript function AC_FL_RunContent() is used to dynamically generate the <object> and <embed> tags necessary for the browser to display the Flash object. This code is placed in the html code where the ccPlayer object should appear:



Remember to include the reference to the AC_RunActiveContent.js file in the header:



back to top

Previous | Next | ccPlayer Help Contents | ccPlayer Home

Last updated: September 28, 2011