FLV player tutorial
Web Stunning FLV Player Tutorial

Install

- Close Dreamwever before installation.
- Double click on MXP/ZXP file to start installation process.
- If your system doesn't recognize the .mxp or .zxp file extensions, install Extension Manager
- After installation is completed, start Dreamweaver.
- (Restart Dreamweaver if it was running during the installation).

Open the player user interface

- Click to insert the cursor where you want the Flash video player to appear and select...
- "Insert" ==> "Media" ==> "WebStunning Video Player"


- If your page is unsaved Dreamweaver will prompt you to save the page.

Playlist tab

/img/playlist.png



On this tab, you can easily edit playlist data.
- Click the plus button to add new element in the list.
- Minus button to remove element from the list.
- Move up and down elements in the list by clicking right side buttons over the list.

Element Title - Small description to thumbnail playlist image.
Type of Main Video - File (URL) or five type of the streaming servers: RTMP, RTMPT, RTMPS, RTMPE, RTMPTE.
(Choose "YouTube video" to play/get direct links to YouTube video or download YouTube video from the page)
Main Video - Video file, direct YouTube link or stream server URL.
- File types: .flv, .mov, .f4v, .mp4, .m4a, .mp4v, .3gp, .3g2
- YouTube links: http://www.youtube.com/watch?v=videoID
- Servers using RTMP, RTMPT, RTMPS, RTMPE or RTMPTE protocol.
Additionally, there's built-in support for streaming features of some big CDN's :
- FLV and MP4 streaming through the Bitgravity CDN
- Live and progressive streaming through the Highwinds CDN
- Live and progressive streaming through the Limelight CDN
- Live and progressive streaming through the Akamai CDN
Stream URL example: RTMP://StreamServer.com/MyStreamName ("Path to Stream server / Stream name")
Preview Image/Time Spot - The image will be displayed in the player before the video started. If the image is not defined, first frame of the movie will be used. You can choose any other frame defining seconds (Time Spot, e.g. 1, 2, 1.15, 1.25) of the frame in the movie
Thumbnail Image - The image will be displayed in the thumbnail playlist and thumbnail carousel.

Advanced Settings

MainVideo Link - Adds link to the main video.
MainVideo Link Target - Video link target. (_self,_blank,_top,_parent)
Subtitles File - Link to .srt or Timed Text XML file with subtitles for main video.
Preroll Ad - Video advertisement URL. The Ad plays before the main video. Leave the field empty if you don't need ads.
Preroll Ad Link - Video advertiser link.
Preroll Ad Link Target - Video advertiser link target.(_self,_blank,_top,_parent)

- You can preview videos, ads, preview images(or time spots) and thumbnail images choosing corresponding item in the list over the right top corner preview area.

Player tab

/img/player.png


Control Bar

Show Control Bar - Show/hide player control bar.
Control Bar Skin - Sets a pre-built skin to the control bar. All skin images will be inserted in the folder "skin".
Auto-hide - If set to (Yes), the main controlbar will auto-hide over the video.
Transparency - In combination with "Top Color" and "Bottom Color" defines the color of the main control bar in the video player. It defines the intensity of the color to use. The admissible values for this parameter are integers between 0 and 100.
Top Color - (for default skin only) Defines the top color of the main control bar in the video player.
Bottom Color - (for default skin only) Defines the bottom color of the main control bar in the video player.
Detach Control Bar - Controls whether or not to detach control bar from the video area
Detach Distance - Controls the distance between detached control bar and video area

Player Look

Player width - Player width in pixels.
Player height - Player height in pixels.
Video proportions - Sets whether or not to constrain aspect ratio of a video.
Auto Size - Sets whether or not the video and the player controls will adjust their size according to the flash object size.
Rounded Corners - Enables rounded corners for the player
Rounded Corners Radius - Controls the radius of the rounded corners
Background - Enables visible background for the player
Background Color - Player background color under the video area

Playback

Auto Play First Video - Sets whether or not the initial video will autoplay when the player loads.
Auto Play Next Video - Sets whether or not the next video in playlist to play when the previous video is done.
Loop Play - Sets whether or not to play the playlist in the loop.
Deblocking filter - The filter aims to improve the appearance of decoded pictures. "Auto" recommended for most videos. But sometimes it's better to define "Sorenson filter", "On2 filter and no deringing filter", "On2 and the fast On2 deringing filter" or "On2 and the better On2 deringing filter"
Dual Threshold Buffering - Helps to absorb bandwidth fluctuations. Very useful with streaming video.
Buffer Time - The size of the buffer in seconds. Playback starts only after the buffer is full. Make this large enough to compensate for gaps in the available bandwidth.

Player Files

Player Files Path - Defines the folder for player files: "player.swf", "playlist.swf", "includes" folder with "swfobject_modified.js" and "expressInstall.swf". You can specify the same folder for several pages with the player.
Skin Folder Path - Defines the folder for the player skin images.
Config XML Path - Defines the configuration XML name and URL
XML Playlist Path - Defines the playlist XML name and URL

Controls tab

/img/controls.png


Button's Appearance

Buttons Color - Changes the color of the default white buttons and text.
Default Volume - Initial sound volume level in percents. Defaults to 60.
Seek Bar Color - Defines the color of the seek bar control.
Show Big Play Button - Show/hide play button in the center of the player's screen.

Text

Show ToolTips - Setting to (Yes) enables button tooltips. Default: (No)
Show Video Title - Setting to (Yes) enables rollover title of the video at the bottom of the screen
Text Color - Defines the color of the text in the player.
Shadow Color - Defines the shadow color of tooltip text.
Text Font - Defines the font type for the text in the player.
Text Font Size - Defines the text size.
Default Email subject - Defines the email message subject text.
Default Email Message - Defines the email message body text.
Tooltips Array - Comma delimited array of button tooltip texts

Show/Hide Control Bar Buttons

Email to Friend - Show/hide the email button on the control bar.
Embed/Link - Show/hide embed code and link on the control bar.
Fullscreen/New window - Show/hide fullscreen/new window button on the control bar.
Show Playlist - Show/hide playlist button on the control bar.
Timer - Show/hide movie timer on the control bar.
Video Properties - Show/hide video properties button on the control bar.
Volume Control - Show/hide volume control button on the control bar.

Thumbnails

Thumbnail Width - Controls thumbnail width in the carousel, inner playlist and external playlist.
Thumbnail Height - Controls thumbnail height in the carousel, inner playlist and external playlist.
Show Thumbnail Carousel - Show/hide the horizontal thumbnail carousel at the bottom of the player's screen when video stopped.
Show Thumbnail Carousel on Play - Show/hide the horizontal thumbnail carousel at the bottom of the player's screen while video playback.

Preview tab

/img/preview.jpg



On this tab, you can preview the look of the player.
A larger video player will be resized to fit the height or width of the window.

Extra tab

/img/extra.png



External Playlist

Here you can add and configure external playlist (another flash object that can be moved independently around the page using CSS styles).

Add External Playlist - Select type of playlist "List", "Carousel", "Grid".
Transparent Background - Enables transparent background for the playlist object.
Background Color - Sets color for the playlist background.
Playlist Width - Defines playlist object width.
Playlist Height - Defines playlist object height.

Subtitles

Align - Align of the subtitles text on the player screen.
Font - Subtitles text font.
Bold - Subtitles text bold style.
Color - Subtitles text color.
Italic - Subtitles text italic style.
Size - Subtitles text size.
Shadow - Subtitles text shadow.
Shadow Color - Subtitles text shadow color.

Google Analytics

Here you can enable Google Analytics tracking for differen player events, Play, Stop, Pause, AD Viewed and Most Viewed Videos.
If you have Google Analytics code on your page, this player function will automatically add several events to your reports in Google Analytics account.

/img/ga01.gif

/img/ga02.gif

/img/ga03.gif

/img/ga04.gif

Sharing in Facebook, Twitter, Delicious etc.

Enable/disable share buttons on the left side of the video.

Flash - Javascript Interaction

Send Events to Javascript - If the feature is enabled, the flash FLV player will call Javascript function "flashEvent" if it's defined on the page with the player.
Detailed description and examples of "flashEvent" function
Add following script on your page to test the feature.
function flashEvent(e){
    alert('ID: '+e.flashObjectID+', isAD: '+e.isADPlaying+', playingVideoNum: '+e.playingVideoNum+', Event: '+e.event);
}
The following example script will make a random loop(with shuffle) playback of playlist.
function flashEvent(e){
	if(e.event == "videoCompleted" && e.isADPlaying == false){
		swfobject.getObjectById(e.flashObjectID).JS_PlayRandom();
	}
}

Add Demo HTML Buttons - Determines whether to add example HTML buttons on your page or not.
Note: these buttons are inserted only to demonstrate how to use Javascript calls to control the player. This code can be modified and used anywhere you want on your page.
<button onclick="swfobject.getObjectById('WSplayer').JS_PlayPause()"> Play/Pause </button>
<button onclick="swfobject.getObjectById('WSplayer').JS_Stop()"> Stop </button>
<button onclick="swfobject.getObjectById('WSplayer').JS_PlayNext()"> Next </button>
<button onclick="swfobject.getObjectById('WSplayer').JS_PlayPrev()"> Prev </button>
<button onclick="swfobject.getObjectById('WSplayer').JS_PlayRandom()"> Random </button>
<button onclick="swfobject.getObjectById('WSplayer').JS_PlayVideoNum(1)"> PlayVideo1 </button>
<button onclick="swfobject.getObjectById('WSplayer').JS_PlayVideo('video.flv')"> PlayVideoUrl </button>

Special parameter for dynamically created pages

DynamicVideo - {object} The parameter with actual video can be added in the FlashVars. All fields in the object except of the "video" are optional.
Examples of FlashVars object:
(short)
<param name="FlashVars" value="_dynamicVideo={video:movie.flv}"/>

(full)
<param name="FlashVars" value="_dynamicVideo={video:movie.flv, preview:preview.jpg, advideo:adMovie.flv, adLink:adLink, thumbnail:thumbnail.jpg, description:descriptionText, subtitle:subtitleFilePath}"/>

(along with other FlashVars)
 <param name="FlashVars" value="_dynamicVideo={video:movie.flv}&_objectID=WSplayer&_configXMLPath=Player_files/config.xml&_playListXML_Path=Player_files/playList.xml" />

Wowza Media Security

Enable Secure Token - Enables secure token feature for Wowza Media Server PRO
Popular media server with free and pro versions.
Password (Shared Secret) - Wowza password (shared secret).

Branding tab

/img/branding.png



The tab is active only in branding version

Customize Watermark Logo

Logo Image - The logo image URL.
Logo Alpha - The logo image alpha transparency.
Logo Link - The logo image link.
Logo Link Target - The logo image target (_blank, _self, _parent, _top). _blank opens a new window, _self opens within the same window, _parent is used with a frame, it will open within the inner frame, _top is also used with a frame, it will open using the entire window, not within the frame.

Customize Right Click Menu

Menu Item - The flv player menu item caption.
Menu Item Link - The flv player menu item link.
Link Target - The flv player menu item target (_blank, _self, _parent, _top). _blank opens a new window, _self opens within the same window, _parent is used with a frame, it will open within the inner frame, _top is also used with a frame, it will open using the entire window, not within the frame.

Customize Playlist Right Click Menu

Menu Item - The playlist menu item caption.
Menu Item Link - The playlist menu item link.
Link Target - The playlist menu item target (_blank, _self, _parent, _top). _blank opens a new window, _self opens within the same window, _parent is used with a frame, it will open within the inner frame, _top is also used with a frame, it will open using the entire window, not within the frame.

Edit the player

There are three ways to open user interface to edit the player:
- "Insert" ==> "Media" ==> "WebStunning Video Player"
- Ctrl + Shift + A
- Right click menu option in design view

edit flv player

User interface command buttons and files

flv player ui buttons

Command buttons

Insert - Inserts/replaces player code. Adds necessary files in "Player_files" folder.
Save - Saves all settings inside Dreamweaver and updates settings on page.
Cancel - Cancels last changes and closes user interface window.
Reset to Default - Resets all settings to default.
Help - Opens this tutorial page.
FAQ - Opens FAQ page.
flv player folders

Player files

- demo_files - will be created only if the player still use demo files,
- Player_files - contains by default all player files, however you can specify in the Player tab any position for "player.swf", "playList.xml", "config.xml" and "skin" folder.
- player.swf - player flash file,
- playlist.swf - external playlist flash file (inserted only if selected in the Extra Tab),
- playList.xml - contains all playlist information,
- config.xml - contains all player configuration parameters,
- includes - contains necessary files "swfobject_modified.js" and "expressInstall.swf",
- skin - contains skin image files (inserted only if image skin is selected in the Player Tab),