VoD – Placing Streaming Video into a Website

Now you’ve made your streaming video file and want to place it on your website. There are two ways of doing this: Direct link and embedded file. It depends entirely on how you want the video to appear on the website, as to which one you choose.

  • Direct Links

Direct links enable the video file to be opened in the user’s default media player. For example, if you clicked a link to a Quicktime file, your Quicktime player will open and play the video. This gives the user control over which media player they use but, can be unpredictable and unsightly.

To add a direct link on your website you simply need to add a hyperlink which points to the video file.

Example:

<a href=”videofilename.mov” mce_href=”videofilename.mov”>Click here to view video</a>

  • Embedded Files

Embedding a video file will place the video file right onto the webpage in media player screen, providing a greater level of control over how the video is displayed.

To embed the file you must add HTML code to the webpage, dependant on your video file. This example is for Quicktime files.

Example:

<OBJECT CLASSID=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” WIDTH=”320″HEIGHT=”180″
CODEBASE=”http://www.apple.com/qtactivex/qtplugin.cab”&gt;
<PARAM name=”SRC” VALUE=”videofilename.mov”>
<PARAM name=”AUTOPLAY” VALUE=”true”>
<PARAM name=”CONTROLLER” VALUE=”false”>
<EMBED src=”videofilename.mov” mce_src=”videofilename.mov” WIDTH=”320″ HEIGHT=”180″ AUTOPLAY=”true” CONTROLLER=”false” PLUGINSPAGE=”http://www.apple.com/quicktime/download/”&gt;
</EMBED>
</OBJECT>

Notice that this method uses two tags: <object> and <embed>. This is for maximum browser compatibility. You will need to set the file name and attributes for both tags.

This tutorial is courtesy of Media College. For more information and HTML for embedding other video file formats, view the entire tutorial here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: