FLV Play Manual

You will learn how to integrate FLV Play into your web site to play FLV video.

1 - What files are required?

These are the files required for showing video on the web by using FLV Play :

• The video file - this is the video you want to show to your audience. This file has a FLV extension.
• A Thumbnail image - this is the thumbnail that will be shown while the video is buffering. This file must have exactly the same name as the video file plus the JPG extension. Ex: if the video file is video.flv then the image file must be video.flv.jpg.
• The player - the player from FLV Play you want to use to show your video. This file has a SWF extension and is normally named flvplay1.swf.
• The skin - this is a file used by the player which dictates the graphical appearanceof all the interface elements. This file has a SWF extension and is normally named skin1.swf. These files are part of the FLV Play package.
• The HTML page - this is your HTML page which will show your video and which you will learn how to create in step 2.

2 - Create your HTML that will show the video

You can use our automatic HTML Generator to easily create the HTML to include FLV Play into your HTML.

A player is included in any HTML page like any other Flash object. Just copy & paste the HTML code below to your own HTML page:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=7,0,0,0" type="application/x-shockwave-flash" width="100%" height="200" align="middle"> <param name="allowScriptAccess" value="sameDomain"> <param name="quality" value="best"> <param name="bgcolor" value="#000000"> <param name="scale" value="noScale"> <param name="wmode" value="window"> <param name="salign" value="TL"> <param name="menu" value="false"> <!-- change here: movie and FlashVars --> <PARAM NAME="movie" VALUE="flvplay1.swf"> <PARAM NAME="FlashVars" VALUE="skinSrc=skin1.swf&mediaSrc=video.flv"> <!-- and here src and FlashVars--> <embed src="flvplay1.swf" FlashVars="skinSrc=skin1.swf&mediaSrc=video.flv" quality="best" bgcolor="#000000" width="100%" height="200" swLiveConnect="false" menu="false" wmode="window" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed> </object>

3 - Customize the video player

You can use our automatic HTML Generator to easily create the HTML to include FLV Play into your HTML.

Next you'll have to tell the player how you want it to behave. The player customization is done by using variables which are defined in the HTML object by FlashVars (note the above HTML and look for FlashVars). Note that the FlashVars are duplicated because Internet Explorer and Mozilla browsers have different methods of defining a Flash object.

To learn all the possible FlashVars FLV Play accepts please read appendix A.

4 - Upload to your server

When everything is done you only have to upload all the needed files which are all the ones listed in section 1 plus the HTML file you created in section 2. All the files should be placed in the same directory.

 

Appendix A - FlashVars used to customize FLV Play

Variable Name	Type / Possible Values	Required	Description
mediaSrc	String	Yes	The source video filename to play. Ex: video.flv. The source video can also be in the format of an absolute URL. Ex: http://example.com/video.fl
skinSrc	String	Yes	The skin used by the player. Ex: skin1.swf.
mediaWidth	Integer	No	The video width. The native dimensions of the video will be used if this variable is not provided. This value is mandatory if you want to use the startMode variable.
mediaHeight	Integer	No	The video height. The native dimensions of the video will be used if this variable is not provided. This value is mandatory if you want to use the startMode variable.
startMode	start / stop / imgPressToPlay / ImgMouseOverToPlay	No	Defines how the player will start: Play - the video will start playing automatically. Stop - the video will not start automatically. ImgPressToPlay - video will start playing after a click. ImgMouseOverToPlay - video will start playing when user passes the mouse over the player. Note: mediaWidth and mediaHeight variables must be defined, otherwise imgPressPlay and imgMouseOverToPlay will not work. Note 2: the thumbnail image must be available, otherwise imgPressPlay and imgMouseOverToPlay will not work.
endMode	stop / loop / rewindStop	No	Defines how the player behaves when reaching the end of the video: Loop - loops the video indefinitely. Stop - stops playing when reaching the end. RewindStop - stops and rewinds to beginning.
autoRewind	Boolean: 1 / 0	No	If enabled, clicking the Stop button will auto-rewind to the beginning.
seekingSpeed	Integer	No	The speed at which the Back and Forward buttons will seek. Note: This setting should be higher than the Keyframe value from Video tab. If seeking back during play shakes a little, you should increase this value.
onClickNavigate	Boolean: 1 / 0	No	Navigate into a web site URL when clicking the video.
onClickUrl	String	No	Web site address (URL) to launch.
onClickTarget	String	No	Target web browser window name, if any.
onEndNavigate	Boolean: 1 / 0	No	Navigate into a web site URL when the video reaches the end.
onEndUrl	String	No	Web site address (URL) to launch.
onEndTarget	String	No	Target web browser window name, if any.
bufferTime	Integer	No	Buffering time in seconds. By lowering the buffering time movies will start-up faster, however they may be more susceptible to streaming pauses in lower bandwidth connections. As a rule of thumb, if you're encoding for slower connection speeds, the buffering time value should be higher.
screenMode	-1 / 50 / 100 / 200	No	A value of -1 means video will resize to available player space, while values 100 and 200 will size the video to 100% and 200% of their encoded frame size.
interfaceAnchor	stage / media	No	Defines how the player will resize itself: media - player will resize to adjust itself to encoded video dimensions. stage - player will resize to fill the available space.
hasFullMode	Boolean: 1 / 0	No	Enables or disables Full Mode: in Full Mode all player controls are hidden for a maximum video display size. The player can start in Full Mode or switch to Full Mode after a time of mouse inactivity. Full Mode is best used with a Screen Mode setting of -1 (video will stretch to available space) and Interface Anchor setting set to Stage (player will resize to available space).
startInFullMode	Boolean: 1 / 0	No	Start player in Full Mode.
fullModeMouseTimeout	Integer	No	Mouse inactivity time (in seconds) to wait before automatically entering Full Mode.
fullModeMouseHide	Boolean: 1 / 0	No	Whether to hide mouse cursor in Full Mode.
hasPlayPause	Boolean: 1 / 0	No	Show or hide the Play+Pause button.
hasStop	Boolean: 1 / 0	No	Show or hide the Stop button.
hasSeeking	Boolean: 1 / 0	No	Show or hide the Seek bar.
hasBackAndForward	Boolean: 1 / 0	No	Show or hide the Back and Forward seek buttons.
hasText	Boolean: 1 / 0	No	Show or hide the text area.
textText	String	No	A text message to be displayed in the text area.
textFont	arial / courier / ...	No	Font name.
textSize	integer	No	Font size.
textColor	HTML color	No	Text color. Ex: #FF0000
textStyle	regular / bold / italic /bold+italic	No	Text style.
textAlign	left / center / right	No	Text alignment.
hasMute	Boolean: 1 / 0	No	Show or hide the Audio Mute button.
hasVolume	Boolean: 1 / 0	No	Show or hide the Volume slider.
volumePercent	Integer	No	The initial volume level from 0 to 100.