If you have a blog or a home page you might for sure need sometimes to put a video of yours onto your web-site or your web-page for your friends to see it. Of course, you can upload a video to some service - YouTube or something alike - but we have a better solution for you: AVS Video to Flash program will convert your video for web and even create a markup for the web-page with the video. Simply follow the steps below to find out how to convert video and edit your resulting web-page markup.
[Back to the Top]
After you install AVS Video to Flash you can run it and convert the video files for your web-page. Please read the "How can I convert video for a web-page?" guide to find out how to do that.
The video conversion process will take some time depending on the source file size, conversion parameters and your computer configuration. When the conversion is over, the following window will offer possible actions for your created video and the web-page:
Please select the Find Target option to be able to edit the resulting page.
[Back to the Top]
a. The resulting files and initial page markup
After the Find Target button is pressed, the following Windows explorer window will be opened:
You can see the following files here:
avs4you_player.swf - the name of the player created by the program to playback the video on the page;
Glass.swf - the name of the skin selected for the player (can also be Mech.swf, Plastic.swf, Platinum.swf, Wood.swf and Youtube.swf depending on the skin, - see Step 3 of the "How can I convert video for a web-page" guide);
index.htm - the created HTML-page that can be edited so that its style fit your home page or web blog;
MOV006_NEW.flv - the name of the converted video (will depend on the input video file name, if you leave the default output name or on the name, - see Step 5 of the "How can I convert video for a web-page" guide);
swfobject.js - the script file necessary for correct work of the web-page.
Please open the index.htm file using your favorite web-editor.
Note: if your web editor has two modes -
'Design' mode and
'Source' editing mode (or something like that), you need to choose the
source editing mode to be able to see and change the page markup.
Initially it will contain code like this:
<html>
<head>
<title>AVS FLV Player</title>
<META http-equiv="content-type" content="text/html; charset=utf-8">
<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 0px #000; width: 400px; height: 300px;
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('avs4you_player.swf', 'player', '400', '300',
'7', "#000000");
so.addParam("allowScriptAccess","always");
so.addParam("allowFullScreen","true");
so.addParam("wmode", "window");
so.addParam("scale", "noscale");
so.addVariable("file", "MOV006_NEW.flv");
so.addVariable("height", "400");
so.addVariable("width", "300");
so.addVariable("theme", "Youtube.swf");
so.addVariable("repeat", "1");
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>
If you leave all the settings with their default values, the page will look like this (click here to see the page).
b. Adding text
You can add some text or images to the web page, inserting it after the closing </div> tag:
<div id="flashcontent">
<strong>You need to upgrade your Flash Player.</strong>
</div>
<p>If you have a blog or a home page you might for sure need sometimes
to put a video of yours onto your web-site or your web-page for your friends
to see it. Of course, you can upload a video to some service - YouTube or
something alike - but we have a better solution for you: AVS Video to Flash
program will convert your video for web and even create a markup for the
web-page with the video. Simply follow the steps below.</p>
The same way other text can be added using the <p>...</p> tag.
Click here to see the page example
c. Changing the player position
As you can see, the text is added to the right of the player because of the property 'float' that is defined in the 'style' section of the web-page. It makes the video go to the left of the text:
<style type="text/css">
body { background-color: #FFFFFF;
font: .8em/1.3em verdana,arial,helvetica,sans-serif }
#flashcontent { border: solid 0px #000;
width: 400px;
height: 300px;
float: left }
</style>
You can change that to 'float: right' if you prefer that the video is placed to the right of the text:
<style type="text/css">
body { background-color: #FFFFFF;
font: .8em/1.3em verdana,arial,helvetica,sans-serif }
#flashcontent { border: solid 0px #000;
width: 400px;
height: 300px;
float: right }
</style>
Click here to see the page example
In case you do want the video to be placed in the center of the page and want some text before and after the video, you will need to do the following adjustments to the page markup:
Change the 'float' property of the #flashcontent to the 'float: none;'.
Add the 'margin' property to the #flashcontent - 'margin: auto;'.
Add the 'text-align' property to the body element - 'text-align: center;'.
Add the 'text-align' property to the p element - 'text-align: justify;'.
Place a text in <p>...</p> tags before the <div>...</div> element - that is the text that will go before the video on the page.
Change the title of the page - it goes between the <title>...</title> tags.
Finally your page markup might look like this:
<html>
<head>
<title>My Page with the Video Converted with
AVS Video to Flash</title>
<META http-equiv="content-type" content="text/html; charset=utf-8">
<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; text-align: center; }
#flashcontent { border: solid 0px #000; width: 400px; height: 300px;
float: none; margin: auto; }
p { font-size: 1em; text-align: justify; }
</style>
</head>
<body>
<p>If you have a blog or a home page you might for sure need sometimes
to put a video of yours onto your web-site or your web-page for your friends
to see it. Of course, you can upload a video to some service - YouTube or
something alike - but we have a better solution for you: AVS Video to Flash
program will convert your video for web and even create a markup for the
web-page with the video. Simply follow the steps below.</p>
<div id="flashcontent">
<strong>You need to upgrade your Flash Player.</strong>
</div>
<p>The conversion process will take some time depending on the source
file size, conversion parameters and your computer configuration. When the
conversion is over, the following window will offer possible actions for
your created video and the web-page.</p>
<p>Note: if your web editor has two modes - 'Design' mode and 'Source'
editing mode (or something like that), you need to choose the source editing
mode to be able to see and change the page markup.</p>
<script type="text/javascript">
var so = new SWFObject('avs4you_player.swf', 'player', '400', '300',
'7', "#ffffff");
so.addParam("allowScriptAccess","always");
so.addParam("allowFullScreen","true");
so.addParam("wmode", "window");
so.addParam("scale", "noscale");
so.addVariable("file", "MOV006_NEW.flv");
so.addVariable("width", "400");
so.addVariable("height", "300");
so.addVariable("theme", "Youtube.swf");
so.addVariable("repeat", "1");
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>
And click here to see the resulting page.
Now you will need to upload your created page and ALL the files listed at the beginning of Step 3 to your server using an FTP-client.
Do not forget to send the link to the page with your video to all your friends!
[Back to the Top]
Please note that AVS4YOU programs do not allow you to copy protected material and are to be used to create a single backup copy for personal use only. You may use this software in copying material in which you own the copyright or have obtained permission to copy from the copyright owner.