Embedding Video in a Web Page - Page 3

Embedding video into a Web page is fairly easy to do and offers many more opportunities to customize the user experience. When a video is playing by itself in a Windows Media Player it is no different than watching a TV program, except the video reception is much worse and its on demand.

When the video is embedded in a Web page all sorts of possibilities exist to enhance the video with other Web media types and create a true video application. Maybe you would like to give the user the ability to jump around in the video by chapters (much like a DVD), or maybe you would like to have a diagram that loads to offer more detail about a product, or maybe you just want to load an advertisement during the program so that you have a business model.

Embedding the video into a Web page allows you to create a true interactive video application that takes the passive TV viewing experience and makes it interactive and user customizable.

Create the ASX file

Just as before, we need to create the ASX for Windows. In fact you can use the simple one you created earlier.

Windows Media Embedding

Here is the code you'll need to place into your HTML page. Remember to place the HTML page and the ASX file in the same directory.

<OBJECT
  ID="WinMedia"
  classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
  CODEBASE= "http://activex.microsoft.com/activex/
  controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
  width=160 height=120 standby="Loading Microsoft
  Windows Media Player components..." type="application
  /x-oleobject">
<PARAM NAME="FileName"  VALUE="yourfile.asx">
<PARAM NAME="AutoStart" Value="true">
<PARAM NAME="ShowControls" Value="true">
<Embed type="application/x-mplayer2"
    pluginspage=
    "http://www.microsoft.com/Windows/MediaPlayer/"
    src="yourfile.asx"
    Name=MediaPlayer
    AutoStart=0
    Width=160
    Height=120
    autostart=1
    ShowControls=1
  </embed>
</OBJECT>

[Lines 4 through 8 above are one line. They have been split for formatting purposes.]

Let's take a look at this big chunk of code. The object tag at the start refers to an Active X object that Internet Explorer uses to play the video. The ID tag names the video. Later this will help us control it with JavaScript. Name it anything you like. Don't worry about the long classid number, it's a number Microsoft uses to make sure every Active X control is unique. The only part you change in the first part is the width and height of the video.

Good Sizes

Size	Bitrate
Width=160 height=120	Use this for 28.8 kbps
Width=240 height=160	Use this for 56 kbps video
Width=320 height=240	Use this for 100kbps or higher. Consider full screen video for 300 kbps or higher.

The <param> names are where you'll make your changes. There are a huge number of possible parameters that can be used to modify the Windows Media Player. First, we will look at the ones that are essential to embed the video in the page and get it playing. Later we'll look at the full list. Here's a short definition of the one's used here.

<param> Name Definition

<param> name	Definition
FileName	Points to the .asx file, you can place the asx files in directories just like a graphic file
AutoStart	Starts the video playing automatically when the page loads, if set to “false” the play button must be pressed to start playback
ShowControls	Shows the basic controls for starting, stopping, fast forward, rewind, pause and audio controls such as volume and mute.

The final part of the code covers backwards compatibility with Netscape. If you are only using this to display in Internet Explorer then the whole <embed> part of the code can be removed. Netscape uses the <embed> tag to place the video in the Web page. Netscape must have the Windows Media plug-in installed in order to play the video. The plug-in is installed automatically when Windows Media Player is installed on a computer using Netscape. Notice that you have to repeat the param names here. Netscape uses "1" for True and "0" for "False.

Complex ASX Files - Page 2
Windows Media Playback in a Web Page
Parameters - Page 4