Embedding Flash Video Files
Flash Media Format
When you use a Flash format for progressive downloading, compress it into .swf format, as mentioned on the previous web page about streaming Flash videos, and then it is ready to stream from your webpage. Now all you need to do is embed the Flash player video file into your webpage using the appropriate HTML codes. This simply means that you put the media player code directly into your web page code so that it is displayed on the webpage itself (in the user's browser) instead of loaded into another video-viewing program. To do this, you must insert a special section of HTML code.
HTML Code to Embed Flash Videos
The following are the two HTML tags necessary to embed a Flash media file into a web page: <object> and <embed>. The <object> html tag is for use with Internet Explorer on Microsoft Windows platforms and other browsers that have ActiveX support. The <embed> tag is for most other browsers besides IE, such as Mozilla FireFox browser.
You are welcome to "copy and paste" to make use of the sample HTML code below, but remember to replace the "video-filename" with your own .swf filename and alter the parameters (such as video frame size) to your preferences.
width="320" height="400" >
<param name="movie" value="video-filename.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
(Note: The HTML elements and tags are case-insensitive; e.g. you could use "<embed...>" or "<EMBED...>".)
For both the <object> tag and the <embed> tag, use "true" (yes) or "false" (no).
When setting the <object> tag parameters, be sure to always enclose parameter values in double quotation marks.
classid="..." - This should be copied exactly as shown here because it tells the browser what filetype will be loaded, and what application should handle it. Here, it identifies the ActiveX control for the browser.
codebase="..." - This should be copied exactly as shown here because this tells the browser where to find the Flash player plugin program if it is not already installed. If it is not, it will install automatically if the user allows it to (the browser will ask the user if he wants to install the browser plugin, and the user agrees to).
width and height - When setting the width and height, be sure you set them for at least the width and height of the actual video file, and keep the same proportion of width to height so it does not look distorted.
param name="movie" value="..." - This is the URL to the source file (locates your video file). This can be either a relative URL or a full URL to the video clip file.
param name="quality" value="..." - There are 6 different settings to this feature: "low", "autolow", "autohigh", "medium", "high", and "best". When set to:
- "low" - the videoplayer will favor the playback speed of the video clip and will never use anti-aliasing.
- "autolow" - the player will emphasis the speed at first but then will improve the appearance whenever possible. Playback will begin with anti-aliasing turned off at first but if it detects that the processor can handle it, the anti-aliasing will be turned on.
- "autohigh" - the player will equally emphasize playback speed and appearance at the start, but will favor playback speed over appearance if it is necessary. Anti-aliasing is turned on at first, but will be turned off if the actual frame rate drops below the specified frame rate to enhance playback speed. To imitate the "View > Antialias" setting in Flash, use this setting.
- "medium" - the player will apply some anti-aliasing, but will not smooth bitmaps. The quality of this setting is better than the "low" setting, but will not be as good as the "high" setting.
- "high" - the player will favor the appearance over the playback speed and anti-aliasing will always be applied. As long as the clip does not contain any animation, the bitmaps will be smoothed.
- "best" - the player will display the best quality possible and will not concern itself
with video playback speed. The entire clip will be anti-aliased, and all bitmaps will be smoothed.
param name="play" value="..." - If this is set to "false", the movie clip will not play immediately on loading in the browser, and the user must click to begin the video playback. The default value is "true" if this attribute is omitted.
param name="loop" value="..." - If this is set to "false", the movie will stop when it reaches the end. If set to "true", it will play indefinitely (looping continuously until it is stopped manually or the webpage is closed). The default value is "true" if this attribute is omitted.
The <embed> tag basically is a duplicate of the <object> tag, but is needed to function with just about all other browsers other then Windows IE (such as Mozilla FireFox). All the parameters for both tags (embed src="....swf", width="...", height="...", play="...", loop="...", and quality="high") are the same.
pluginspage="..." - This is the attribute that tells the browser where to find Flash Player if it is not already installed. If it is not, it will install automatically if the user allows it to.
Now that you are equipped with the proper HTML code to embed your movie files, all you have to do is place it where you want it to be displayed in your web page. Give it a try and see how it looks. Don't be afraid to experiment! That's the best way to know how to place it the way you want it to be displayed on your webpage.
If you want to try embedding another video format, just click on the one below that you want to embed in webpages:
Windows Media Files (WMF Videos)