(S. Chen: IE uses FLV; Firefox/Chrome use MP4.)
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. (S. Chen: For FLV, use Format Factory instead of Oxelon.)
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) (S. Chen: choose 'Default' in Format Factory), Bitrate (quality level) (S. Chen: video 512 audio 128 are ok) 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:
|
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 & 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 OGG (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 (S. Chen: 640x480 is ok), bitrates (S. Chen: video 512 audio 128 are ok). (S. Chen: For MP4, use Adobe Premiere instead of Oxelon.)
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.
Step 7. Upload the converted OGG 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:
|
Where www.mysite.com is the name of your web server/site
folder is the path where MP4, OGG files are located
myvideo.mp4 is the name of your MP4 file
myvideo.ogg is the name of your OGG file
Automatic playback in HTML5 is also possiblle. Just substitute autoplay for controls.
Example: <video width="420" height="315" 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:
|
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:
|
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 codecsStep 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.
No comments:
Post a Comment