Selecting a Player and Building an HTML-page

SWF Player Platinum skin
Platinum Player Skin

SWF Player Glass skin
Glass Player Skin

SWF Player Wood skin
Wood Player Skin

SWF Player Mech skin
Mech Player Skin

SWF Player YouTube skin
Youtube Player Skin

SWF Player Plastic skin
Plastic Player Skin

When you create a video for an HTML-page, it can be quite a useful idea to create a player for your flash video and embed it into the page code. AVS Video Converter can do that for you.

First you should select video to convert and the output video file name and folder. See the Converting to FLV Format section for more detail on that.

After that check the Create Flash Player and HTML page for web sharing option in Advanced Settings of AVS Video Converter:

Create Player and Page option After that you can select one of the flash player preset skins from the drop-down list. A video player with its own controls will be added to your created flash video. You can select the options to Loop the video playback so that it will start again automatically when it reaches its end, and Autostart the video so that the video started the playback automatically when it is loaded into the page.

An HTML-page with the code quoted below will be written and put into the destination folder together with the output video.

<html>
  <head>
      <META http-equiv="content-type" content="text/html; charset=windows-1252">
      <title>AVS Flash Player</title>
      <script type="text/javascript" src="swfobject.js"></script>
      <style type="text/css">
         body { background-color: #FFFFFF; font: .8em/1.3em verdana,arial,helvetica,sans-serif }
         #flashcontent { border: solid 1px #000; width: 356px; height: 321px; float: left }
      </style>
   </head>
   <body>
      <div id="flashcontent">
         <strong>You need to upgrade your Flash Player.</strong>
      </div>
      <script type="text/javascript">
         var so = new SWFObject('player_v4.swf', 'player', '356', '321', '7', "#000000");
         so.addParam("allowScriptAccess","always");
         so.addParam("allowFullScreen","true");
         so.addParam("wmode", "window");
         so.addParam("scale", "noscale");
         so.addVariable("file", "2_NEW.flv");
         so.addVariable("height", "321");
         so.addVariable("width", "356");
         so.addVariable("theme", "Glass.swf");
         so.addVariable("repeat", "0");
         so.addVariable("autostart", "0");
         so.addVariable("image", "");
         so.addVariable("volume", "50");
         so.addVariable("scaleonresize", "none");
         so.addVariable("top_caption", "");
         so.addVariable("bottom_caption", "");
         so.addVariable("v", getQueryParamValue("v"));
         so.write("flashcontent");
      </script>
   </body>
</html>

When you are ready, click the Conversion Now! button to begin the conversion process.

You can open the HTML-page later using your favorite HTML-editor, change it to your liking and copy and include it to your own web page. Do not forget to put all the files from the output video file folder to the place where your web page is situated on your web server so that it worked correctly.

Note: you will need to copy the code from the created HTML-page into the page of your own the following way:

include the code between the <style type="text/css"> and </style> tags into your CSS file or style-code on the page (if you already have the style for the body section defined on your own page you will need to omit the first line - body { background-color: #FFFFFF; font: .8em/1.3em verdana, arial, helvetica, sans-serif } and use your own style for the page body instead);
include the <script type="text/javascript" src="swfobject.js"></script> code into your page <head> section;
include the code between the <body> and </body> tags into the place on your page where the player should be placed.

You can also change the following code lines:

#flashcontent { border: solid 1px #000; width: 356px; height: 321px; float: left } - the style used for your flash player. It consists of the following changeable parameters:
- border: solid 1px #000 - the border used for the player window.
  1. The solid parameter defines the border style (can also be dashed, dotted, double, groove, hidden, inset, none, outset, ridge). If you select the none value, the border will not be displayed.
  2. 1px - the width of the border used in pixels. You can enter any value you need.
  3. #000 - the color of the border used in hexadecimal format. #000 or #000000 corresponds to the black color, #ffffff - to the white. You can use any combination of six digits ranging from 0 to 9 and letters from a to f to form a color, just do not forget to put the hash # symbol in front of them.
- width: 356px - the width of the player window in pixels (the width of the place on your web page allocated for the player). Is selected automatically depending on the preset used while converting the video file or on the set width of the output flash video file, if the selected profile has been edited.
- height: 321px - the height of the player window in pixels (the height of the place on your web page allocated for the player). Is selected automatically depending on the preset used while converting the video file or on the set height of the output flash video file, if the selected profile has been edited.
- float: left - the position of the player on your created page. The possible values also include float:right (place flash player to the right part of your page) and float:none (will place your video to the default place on your home page, which is defined by your page style settings).
var so = new SWFObject('player_v4.swf', 'player', '356', '321', '7', "#000000");
- 'player_v4.swf' - the name and the path of the player file used for flash video playback. It is usually placed to the same directory as the created HTML-page. If you change its location make sure to reflect these changes here writing the new player file path.
- 'player' - the id given to the player by the program. Normally you should not change it.
- '356' - the width of the area allocated for the flash player in pixels. Is selected automatically depending on the preset used while converting the video file or on the set width of the output flash video file, if the selected profile has been edited.
- '321' - the height of the area allocated for the flash player in pixels. Is selected automatically depending on the preset used while converting the video file or on the set height of the output flash video file, if the selected profile has been edited.
- '7' - the number of the flash player version that must be used to playback the flash video. In case this value is higher than the version of the Adobe flash player installed on the user's computer, the message that is placed between <div id="flashcontent"><strong> and </strong></div> will be displayed (in our case it will be You need to upgrade your Flash Player.) instead of flash video player.
- "#000000" - the background color of your Flash movie in hexadecimal format. #000000 corresponds to the black color, #ffffff - to the white. You can use any combination of six digits ranging from 0 to 9 and letters from a to f to form a color, just do not forget to put the hash # symbol in front of them.
so.addVariable("wmode", "window"); - sets the window mode property of the Flash movie for transparency, layering, and positioning in the browser. Can acquire the following possible values: window (movie plays in its own rectangular window on a web page), opaque (the movie hides everything on the page behind it), transparent (the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance).
so.addVariable("scale", "noscale"); - defines the movie behavior as related to the player window size and aspect. Can take the following values: default (show all) (makes the entire movie visible in the specified area without distortion, while maintaining the original aspect ratio of the movie; borders may appear on two sides of the movie), noorder (scales the movie to fill the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the movie), exactfit (makes the entire movie visible in the specified area without trying to preserve the original aspect ratio; in this case distortion may occur).
so.addVariable("file", "2_NEW.flv"); - the converted flash video file and its path. It is usually placed to the same directory as the created HTML-page. If you change its location make sure to reflect these changes here writing the new flash video file path.
so.addVariable("height", "321"); - the height of the flash player itself in pixels. Is selected automatically depending on the preset used while converting the video file or on the set height of the output flash video file, if the selected profile has been edited. If you change this value, you will need to change the width value - so.addVariable("width", "356"); as well, as the player size is changed proportionally.
so.addVariable("width", "356"); - the width of the flash player itself in pixels. Is selected automatically depending on the preset used while converting the video file or on the set width of the output flash video file, if the selected profile has been edited. If you change this value, you will need to change the height value - so.addVariable("height", "321"); as well, as the player size is changed proportionally.
so.addVariable("theme", "Glass.swf"); - the name and the path of the flash player skin selected before conversion. It is usually placed to the same directory as the created HTML-page. If you change its location make sure to reflect these changes here writing the new player skin file path.
so.addVariable("repeat", "0"); - the movie repeat parameter selected before the conversion. It can be set to 0 that will mean the playback will not be looped and the video stop after the playback is over, or 1 meaning the playback is looped and the video will play over and over again from the beginning when it reaches its end.
so.addVariable("autostart", "0"); - the movie automatic startup parameter selected before the conversion. It can be set to 0 that will mean the playback will not start automatically once the page with the video is loaded to the browser, or 1 meaning autostart.
so.addVariable("image", ""); - the name and path of the image that will be displayed when the page is loaded, provided that the autostart value is set to 0 (i.e. no autostart is enabled). You can select an image file in .jpg format with correct size (height and width equal to the ones of the player/place allocated to the player), just do not forget to enter a correct path to it. You need to insert the image name and path between the second quotation marks, e.g. so.addVariable("image", "../images/MyImage.jpg");.
so.addVariable("volume", "50"); - the volume that will be used to playback your movie.
so.addVariable("top_caption", ""); - the top caption that will be displayed when you roll your mouse cursor over the player window. If you leave this field empty, the default caption will be displayed. If you decide to change it you will need to insert the necessary caption between the second quotation marks, e.g. so.addVariable("top_caption", "my top caption");.
so.addVariable("bottom_caption", ""); - the bottom caption that will be displayed when you roll your mouse cursor over the player window. If you leave this field empty, the default caption will be displayed. If you decide to change it you will need to insert the necessary caption between the second quotation marks, e.g. so.addVariable("bottom_caption", "my bottom caption");.

Note: you can read more information on these and some other player and video parameters on the Adobe site here.