Blog | Sitemap | Forum

Bookmark using any bookmark manager!

Customize skinning flash video player for web
Customize flash video player in the easiest way

How to edit flash video player with code?

PlayerDIY Web Player is a graphical program for customizing skinning flash video player for web, and the generated flash video player definitely can be easily edited on its graphical interfaces. However, in order to make player users could conveniently build video sharing site, PlayerDIY Web Player also offers a solution to make payer users could edit the player with HTML, and could implement playing a specific video in a new page (have a look at the example) in video sharing sites.

Here, the example below will teach you how to edit the flash video player generated with PlayerDIY Web Player with HTML.

Example:
After publish your custom flash video player with PlayerDIY Web Player, you can get the following embed code of it on the published index.html file.

<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">Player will show here</div>
<script type="text/javascript">
var so = new SWFObject('mwplayer.swf','player','500','450','9');
so.addParam('wmode','opaque');
so.addParam('quality','high');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.write("flashcontent");
</script>

1. <div id="flashcontent">Player will show here</div> means after embedding the generated flash video player onto webpage, the player will show between tag <div> and </div>.

2. mwplayer.swf is the actual flash video player, and the path of it can be changed via this parameter, e.g.:” /players/mwplayer.swf” means the player resides in a folder named "players".

3. 500 is the width of the player, and 450 is the height of the player, so the player size can be changed by changing them.

4. Other properties about the generated flash video player (like the property of playlist, skin, playback, etc) also can be edited by adding so.addParam, for example:
1). If add “so.addParam('flashvars','playerOpts=previewBar*black.swf*s||pauseAtFirstFrame*false*b');” between “so.addParam('allowscriptaccess','always');” and “so.write("flashcontent");”, it means the player will have a playlist and, the playlist is black. And the video in the player can be played automatically.
2). If add “so.addParam('flashvars','playerOpts=playItem*0*i||pauseAtFirstFrame*false*b');” between “so.addParam('allowscriptaccess','always');” and “so.write("flashcontent");”, the player will automatically play the first video of the playlist.
3). If add “so.addParam('flashvars'','playerOpts=playListPath*^^../videos/myvideo.flv^../videos/myvideo.jpg*s||pauseAtFirstFrame*false*b ||noWatchBtn*true*b||noPlayListBtn*true*b');” between “so.addParam('allowscriptaccess','always');” and “so.write("flashcontent");”, it means the player will automatically play a video named myvideo.flv whose thumbnail named myvideo.jpg and they are inside the “videos” folder. And the player has no the previous, next and playlist icons on the control bar.

According to the examples above, we could know that each added parameter (e.g.:pauseAtFirstFrame*false*b) includes three parts, they are: 1. the property name "pauseAtFirstFrame"; 2. the value of the property "false" between "*"; 3. the data type of the property "b". And each parameter is separated with "||".
Note: No line break in the so.addParam code.

Property Definitions:

Property Data type Description
previewBar Character string: "s"

Specify the playlist style.
The value can be black.swf, slider.swf and undefined.
Note: If don’t want to show playlist, the parameter should be: playerOpts=previewBar*undefined*e

ShowListAtFirst Boolean type: "b" Set whether show playlist at first frame or not before video playing. Default value is true.

Note: This option will not take effect if "Pause at first frame" option is unchecked
ShowListAtMidst Boolean type: "b" Set whether show playlist or not during video playing. Default value is false.
ShowListAtLast Boolean type: "b" Set whether show playlist or not at the last frame. Default value is true.


Note: This option will not take effect if "Pause at last frame" option is unchecked
playListCache Boolean type: "b" Set whether make browser using the cached playlist or not. Default value is true.
UserDefArea Character string: "s" Set whether show something or not, and show what, at the right of the player. Default value is embed(hs).swf.
If don’t want to show anything. The parameter is playerOpts=UserDefArea**s
Learn more about this property.
noMuteBtn Boolean type: "b" Set whether hide sound icon or not. Default value is false.
noStopBtn Boolean type: "b" Set whether hide stop icon or not. Default value is false.
noFullScreenBtn Boolean type: "b" Set whether hide full-screen icon or not. Default value is false.
noPlayListBtn Boolean type: "b" Set whether hide the previous and next icons or not. Default value is false.
noWatchBtn Boolean type: "b" Set whether hide playlist icon or not. Default value is false.
noProcBar Boolean type: "b" Set Whether hide process bar or not. Default value is false.
noVolumeBar Boolean type: "b" Set whether hide volume bar or not. Default value is false.
noTimeText Boolean type: "b" Set whether hide video time or not. Default value is false.
panelColor Color type: "c" Set the control bar color, e.g.: panelColor*255,0,0*c indicates to set the control bar color to be red;
255,0,0 is for the color components R, G, B.

Note: The color only works when the control bar is transparent.
playerOverMovie Boolean type: "b" Set whether show control bar over video or not. Default value is false.
playerAutoHide Boolean type: "b" Set whether hide control bar or not. Default value is false.
hideDelay Integer type: "i" Delay to hide control bar in certain milliseconds, e.g.: hideDelay*1000*i means delay 1 second to hide the control bar after stop moving mouse.
keepAspect Boolean type: "b" Set whether keep aspect ratio of the video or not when the video is stretched. Default value is true.
minWidth Integer type: "i" The minimum width permitted. When the width of the player is less than the minimum width, the two vertical sides of the video will be cut off, instead of being stretched to match the width of the player.

Default value is 0, i.e. the width of the video will be consistent with the width of the player.
minHeight Integer type: "i" The minimum height permitted. When the height of the player is less than the minimum height, the two horizontal sides of the video will be cut off, instead of being stretched to match the width of the player.

Default value is 0, i.e. the height of the video will be consistent with the height of the player.
autoHideMouse Boolean type: "b" Set whether hide the mouse cursor automatically or not. Default value is false.
sndMute Boolean type: "b" Specify muting the video or not. Default value is false.
sndVolume Integer type: "i" Set the default value of the sound. Possible values range from 0 to 100. Default value is 100.

playerAlign

Character string: "s"

Set the position of the control bar; top means the control bar shows at the top, bottom (default) means at the bottom.

showPlayer

Boolean type: "b"

Set whether show control bar or not. Default value is true.

autoLoad Boolean type: "b" Set whether load the movie automatically or not.
When autoLoad is true, video will be loaded automatically, otherwise, the video won’t be loaded until the play button is clicked.
Default value is false.
unloadOnStop Boolean type: "b" Set whether load video or not when video playing is stopped. Default value is false.


When value is false, player will keep loading the remaining video data if the video hasn't been loaded completely before click the stop button. And doesn't need to load the video again when replay it.


When value is true, click the Stop button before video data has been loaded completely, the remaining video data won't be loaded and the loaded video data will be eliminated. Player has to load the video again when replay it.
bufferTime Floating-point type: "f" Set the buffer time. Default value is 5.0.

e.g.: If value is 2, the player will buffer video data to 2 seconds before playing.
autoRewind Boolean type: "b" Set whether automatically rewind the video or not. Default value is false.
autoChooseNext Boolean type: "b" Set whether play the next video automatically or not. Default value is false.


Note: If the value of autoRewind option is also true, all videos in playlist will be automatically replayed as loop.
pauseAtFirstFrame Boolean type: "b" Specify whether pause at the first frame. Default value is true.

If the value is false, the player will automatically play the video.
pauseAtLastFrame Boolean type: "b" Specify whether pause at the last frame. Default value is false.
bigPlay Character string: "s" Set the style of the big play button which will show when the playing is paused or stopped. e.g.: playerOpts=bigPlay*Classic.swf*s, classic is a name of a big player button.

Note: This property only will tack effect when the player has no big play button.
playBtnAlign Character string: "s" The Alignment of the big play button, possible values are:

top-left, top-center, top-right, left-center, center, right-center, bottom-left, bottom-center, bottom-right
playBtnAlignX Integer type: "i" Set the x ordinate of the big play button; playBtnAlign is the origin.
playBtnAlignY Integer type: "i" Set the y ordinate of the big play button; playBtnAlign is the origin.
playBtnW Integer type: "i" Set the width of the big play button.
playBtnH Integer type: "i" Set the height of the big play button.

showReplay

Boolean type: "b"

Set whether show Replay button or not. Default value is false.

textReplay

Character string: "s"

Set the character of the Replay button. Default value is "Replay".

fscEvent Boolean type: "b" Set to transfer the player event to fscommand or not.

When the value is true, the player event will be transferred to fscommand(t, n); t is the event type. When using the player provided by Flash Video MX, t is MoyeaPlayer persistently; n is event name.
preLoader Character string: "s" Specify the style of the preloader, e.g.: playerOpts= preLoader *Circle2.swf*s, Circle2 is a name of a big player preloader.
thumbNail Character string: "s" Specify the video thumbnail, which will show at the first frame and in the playlist.
playListPath Character string: "s" Specify the video path.
playItem Integer type: "i" Directly specify to play which video in playlist.

 

 

Support