In order to embed a Flash Video file you must include specific code into your HTML document. The necessary code is provided below and can be copied exactly with only two changes necessary highlighted in red. The name of the file and the location of the file is imperative to know and have exactly correct. For example, if there is a file on the content system in the following location:
Please note that the "streaming" directory folder name is not listed in the link but you must include "vod" before the college or department name.
View a short five minute video example illustrating how to incorporate the embed code provided below into an HTML page for a stand alone Web site or into a Blackboard course site. Please click the screenshot below to open the video.
We also have an automatic code generator if you prefer to have the code auto-generated. Please visit the Code Generator Tool.
The code required to embed a Flash Video file is provided below. The highlighted areas are the two aspects that need to be updated based on the location of your file that was uploaded to the streaming folder on the content system. Further down you will find an explanation of the code:
Code Explanation:
<object ...>... </object> — An ActiveX control is being
embedded here, to enable playback by Internet Explorer. Requires CLASSID, height,
width, and src parameters.
<embed ...></embed> — Here a Netscape plugin is being
called. As this is inside the object tag, Internet Explorer will safely
ignore it. IE 5.5 or newer will ignore it anywhere anyway, but earlier versions
would display two copies, had you put this outside the object tag. Firefox, Netscape, Opera, etc. will all ignore the object tag, and
use only the embed tag, which does not require quoting
the arguments, unless they contain special characters such as spaces. Note:
single tag, doesn't really need to be closed.
CLASSID="..." — This specifies what filetype will be
loaded here, and accordingly what application should handle it. This is the
same code used in the Windows registry. The value must be copied literally.
width="...", height="..." — You need to tell
the browser what area to reserve for the display of this object. You should
specify the actual size of the object, or you can get weird display problems. Keep in mind that the playback controls take up 46 pixels of space so for a clip with a height of 240 pixels you will need specify the height as 286.
CODEBASE="..." — This object-parameter tells IE where
to get the ActiveX control, if the user doesn't have it installed in his browser
yet. Installs it on the fly, if the user permits it.
pluginspage="..." — Tells Netscape-compatible browsers
where to take the user, if he doesn't have the right plugin installed, and chooses
the "Get Plugin" option.
<param name="..." value="..."> — All
parameters could be included in the main object tag, but for readability
it is recommended to supply additional parameters via these param tags
and their name-value pairs. Quoting the arguments is necessary!
<param name="FlashVars"
value="movieName=rtmp://streaming.uic.edu/vod/itl/biden.flv&skinFile=http://streaming.uic.edu/player/ClearOverPlaySeekMute.swf" /> — Users are to change the value that movieName points to to the movie URL they are wishing to embed in a webpage.
src="..." — This is the URL to the source file for this
object, under normal circumstances, i.e. for most types of plugins/ActiveX controls.
autoStart="true"/"false" — Should the movie
start playing automatically? Recommended: true (for single movies)
loop="true"/"false"— Should the movie play
once or continuously? Recommended: false
controls="imagewindow"/"ControlPanel" — Defines if this object / embed displays the video or the controls for the video. You must have an "imagewindow" object AND a "ControlPanel" object like in our example to have a full player with controls.
console='...' — The console='...' must be the same for each video / control pair. This is used to match up each video with each control if there are several on a page. This must be uniqe for each video on the page.
