FLV player tutorial
Web Stunning FLV Player Tutorial

Install

- Close Dreamwever before installation.
- Double click on MXP file to start installation process.
- After installation is completed, start Dreamweaver.
- (Restart Dreamweaver if it was running during the installation).

Insert into a page

- 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

video player playlist tab

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 get direct links to YouTube video or download YouTube video from the page)
Main Video - Video file or stream server URL. File types: .flv, .mov, .f4v, .mp4, .m4a, .mp4v, .3gp, .3g2, 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")
Subtitles File - 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.
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.
Save Playlist AS - "Flash parameters" within page or "XML file" in menu folder.
XML Playlist Path - XML file to store playlist parameters.

- 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

flv player parameters tab

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".
Bar Auto-hide - If set to (Yes), the main controlbar will auto-hide over the video.
Bar Transparency - In combination with _mainbar_Bottom and _mainbar_Top 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 - Defines the top color of the main control bar in the video player.
Bottom Color - Defines the bottom color of the main control bar in the video player.

Thumbnail Carousel

Show Carousel - Show/hide the horizontal thumbnail carousel.

Size

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.

Playback

Auto Play - Sets whether or not the initial video will autoplay when the player loads.
Loop Play - Sets whether or not to play a video in a 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.

Controls tab

flv player controls tab

Button's Appearance

Show ToolTips - Setting to (Yes) enables button tooltips. Default: (No)
Buttons/Text 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/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.
Go to Fullscreen - Show/hide fullscreen 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.

Text

Text Font - Defines the font type for the text.
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

Preview tab

flv player preview tab

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

flv player extra tab

External Playlist

Here you can add external playlist (another flash object that can be moved independently around the page), configure its size and background color.

HTML Control Buttons

Here you can add HTML buttons on your page
Play/Pause - onclick="swfobject.getObjectById('WSplayer').JS_PlayPause()".
Stop - action onclick="swfobject.getObjectById('WSplayer').JS_Stop()".
Play Video #1 - onclick="swfobject.getObjectById('WSplayer').JS_PlayVideoNum(1)".

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_PlayVideoNum(1)"> PlayVideo1 </button>

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.

Branding tab

video player branding tab

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 menu item caption.
Menu Item Link - The menu item link.
Link Target - The 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

flv player ui buttons

Press the "Insert Player" button after all changes are made. The necessary code will be inserted into the page, all required files will be inserted in the same folder with the page.

- player.swf - player flash file,
- playlist.swf - external playlist flash file (if selected in the Extra Tab),
- includes - contains necessary files "swfobject_modified.js" and "expressInstall.swf",
- skin - contains skin image file (if selected in the Player Tab),
- demo_files - will be created only if the player still use demo files,