Multi-Media-Tools.com
Search: 

Home Page | Commercial Solutions | Free Solutions | Support
How to add flash video to web site (FLV or SWF)?

If you have a web site, then you possibly plan to add a video using FLASH format (.flv or .swf). How to create .flv file? Are there any special things you have to do on the server? What is the easiest way to add flash video to web site?

You should convert your video into FLV format.

FLV (Flash Video) is a file format used to deliver video over the Internet. FLV content may be embedded within SWF files.

SWF is a vector graphics file format. Intended to be small enough for publication on the web, SWF files can contain animations or applets of varying degrees of interactivity and function.

SWF file can be played directly in web browser, such as Internet Explorer. But FLV file can not be played directly, because it requires a separate SWF file which reads the video content from FLV. The SWF file that plays FLV file is called ONLINE FLASH PLAYER.

If you want to add flash video to your site, then there are two options, which you can consider:

OPTION #1 - Host video on your site.

Pros:
- you can use any online flash player with any skin, interface, look & feel etc;
- quality of video is controlled by you only -- make it very good or bad, as you wish;
- video size is not limited, you can set any size you like;

Cons:
- it requires a high bandwidth;
- your hosting must be reliable to support requests from many visitors simultaneously;


OPTION #2 - Host video on YouTube.com, but insert the video player directly into your web page.

Pros:
- it doesn't require high bandwidth, it's almost FREE even if you have a lot of visitors;

Cons:
- flash player includes advertisements and logo of YouTube;


#1 - HOST VIDEO ON YOUR WEB SITE

BlueHost offers high-quality web hosting, unlimited space and bandwidth.



Click here to learn more about BlueHost Web Hosting...


Step 1. Download and install FREEWARE Oxelon Media Converter.

    Click here to download Oxelon Media Converter

Step 2. Launch Oxelon Media Converter. Click Start -> Programs -> Oxelon Media Converter -> Oxelon Media Converter.

Step 3. Click the "Add Files" button, and select your video file, for example myvideo.avi

Step 4. Click the "Browse..." button to select the output directory (where your converted FLV file must be saved).

Step 5. Choose Media Format: "FLV (.flv)", Video Codec: "FLV", Audio Codec: "MP3", Specify Movie Size (Width and Height), Bitrate (quality level) and click "Conversion".

Step 6. Upload the converted FLV video file to your website.

Step 7. Download free ONLINE FLASH PLAYER:

Click here to download FLV Player

Step 8. Unzip it, and upload the file player.swf to your website (to the same folder where your FLV video file is located).

Step 9. Finally, insert the following HTML code into web page on your site:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="420" height="344">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.mysite.com/folder/player.swf" width="420" height="344">
<!--<![endif]-->
<param name="movie" value="http://www.mysite.com/folder/player.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#FFFFFF" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<param name="flashvars" value="vdo=http://www.mysite.com/folder/myvideo.flv&amp;autoplay=false" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>


Where www.mysite.com - is the name of your web server/site
folder - path where FLV file and FLASH PLAYER are located
myvideo.flv - name of your FLV file
You can also set any width and height values. Note, the height must be increased by 29 pixels from the original source value. It is the height of the player's bar. So, if the height of your video is 240, you must enter 269.

Done!

Here's a screenshot of FLV player:




You can switch player to fullscreen mode by clicking on the button at the bottom-right corner.

It is possible to use several additional variables in the "flashvars" param. Just enter &amp; before each variable.

autoplay = false or true (false by default if missing)
vdo = http://www.mysite.com/folder/myvideo.flv (this is the video file in flv format, required)
sound = 50 (sound volume 0 to 100; 50 by default if missing)
advert = intro or commercial video (optional)
advertdesc = intro or commercial title (optional)
mylogo = path to image file with your logo (optional)
tracker = URL to track videos on play, statistics (optional)
buffer = buffer size in seconds (type: number, default:2 if missing)
splashscreen = splash image URL (optional)
clickTAG = URL, creates a clickable button over video (optional)
endclipaction = auto call javascript function or open URL at the end of the clip (optional)

Related Sites



HTML5 SOLUTION

The method described above will work on many popular internet browsers, but there are some exceptions. For example, internet browsers on iPhone and iPad doesn't support FLASH, but can render HTML5 Video. Therefore, if you want to create a web page with video that works on these "exclusive" HTML5 devices/browsers, you must convert video into MP4 (H264 for video + AAC for audio) and into OGV (Theora for video + OGG Vorbis for audio). Here's how to do that:

Launch freeware Oxelon Media Converter.

Step 1. Click "Add Files", find and open your original video file (for example, myvideo.avi). Select the path where to save the converted files (click "Browse..." to choose the folder).

Step 2. Next, select Media Format: "MP4 (.mp4)", Video Codec: "H264", Audio Codec: "AAC". Choose width, height, bitrates.

Step 3. Click "Conversion". Wait several minutes.

Step 4. Next, click "Add Files", open your original video file once again.

Step 5. Select Media Format: "OGG Video and Audio (.ogg)", Video Codec: "Theora", Audio Codec: "VORBIS". Choose width, height, bitrates.

Step 6. Click "Conversion". Wait several minutes. After that, find .OGG file and rename it into .OGV.

Step 7. Upload the converted OGV and MP4 files into the folder on your web site (where FLV file is already located).

Step 8. Insert the following HTML code into the web page on your site:

<video width="420" height="315" controls>
<source src="http://www.mysite.com/folder/myvideo.mp4" type="video/mp4" />
<source src="http://www.mysite.com/folder/myvideo.ogv" type="video/ogg" />
</video>


Where www.mysite.com is the name of your web server/site
folder is the path where MP4, OGV files are located
myvideo.mp4 is the name of your MP4 file
myvideo.ogv is the name of your OGV file
Automatic playback in HTML5 is also possiblle. Just add autoplay after controls.
Example: <video width="420" height="315" controls autoplay>


Also, make sure your server is using the correct mime-types. This is very important! Find ".htaccess" file in the root of your apache server. Add the following lines into .htaccess file:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


You can even try a mix of both methods. However, in older browsers it may not work at all. Anyway, this is the code -- combination of HTML5 and FLASH, all-in-one:

<video width="420" height="315" controls>
<source src="http://www.mysite.com/folder/myvideo.mp4" type="video/mp4" />
<source src="http://www.mysite.com/folder/myvideo.ogv" type="video/ogg" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="420" height="344">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.mysite.com/folder/player.swf" width="420" height="344">
<!--<![endif]-->
<param name="movie" value="http://www.mysite.com/folder/player.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#FFFFFF" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<param name="flashvars" value="vdo=http://www.mysite.com/folder/myvideo.flv&amp;autoplay=false" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>


Related Sites




#2 - HOST VIDEO ON YOUTUBE, AND INSERT VIDEO INTO YOUR WEB PAGE

Step 1. Convert your video to one of the supported formats, using freeware Oxelon Media Converter.

Here is a list of some well-known formats that YouTube supports:

  .MPEG4, 3GPP and MOV files - Typically supporting h264, mpeg4 video codecs, and AAC audio codec
  .FLV - Adobe-FLV1 video codec, MP3 audio codec
  .AVI - Many cameras output this format - typically the video codec is MJPEG and audio is PCM
  .MPEGPS - Typically supporting MPEG2 video codec and MP2 audio
  .WMV
  WebM files - Vp8 video codec and Vorbis Audio codecs

Step 2. Upload video to YouTube: http://www.youtube.com/my_videos_upload

Step 3. On the page, where your video is located on YouTube you can see the following buttons below the player's bar:



Click the "Share" button. Next, click "Embed".

Step 4. Select and copy HTML code. After that, paste the HTML code into your web page.

Step 5. Upload web page to your server. That's all.

Related Sites






Copyright © Gromkov's Software, All Rights Reserved. Terms of Use - Privacy Policy - Partners - Technical Support