Embedding Windows Media Player on your Webpage
 

Using FrontPage 2003 Inline Frames

Alternate Methods: (These do not require FrontPage)

Embedding Windows Media Player using "Dynamic Ajax Content"

Embedding Windows Media Player using "Ajax Content Tabs"

Embedding Windows Media Player on your webpage is pretty straightforward. This allows you to link a video or audio file and it plays on your webpage in lieu of opening Window Media Player on the user’s computer. The code is as follows:

<object id="MediaPlayer" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"

standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="FileName" value="http://www.edgesz28.com/edgesz28/jokes/blinddate.wmv">
<param name="AnimationatStart" value="true">
<param name="TransparentatStart" value="true">
<param name="AutoStart" value="true">
<param name="ShowControls" value="TRUE">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/isapi/redir.dllprd=windows&sbp=mediaplayer&ar=

Media&sba=Plugin&" src="http://www.edgesz28.com/edgesz28/jokes/blinddate.wmv"

name="MediaPlayer" showcontrols="TRUE" width="320" height="280"></embed>

</object>

The underlined values are the links where the video file itself is located. These need to be the same value. Based on the above code, this is what the player looks like:

You can change the parameters of the player by changing the size, controls information, etc. If you insert the above code into a table, and set the table to fit the player screen, the page containing this table and code and it will automatically start the video when loaded. This works great if you only have one movie per page that you want to play. You can also set the control so that the user needs to press play.

But what if you have multiple movies on the same page, that you want the user to have an option choose which video he/she wants to watch? So that when they click on that particular link, the video plays on the same page/embedded player.

There are two ways to do that. One is have a multiple pages that look identical. But each player would have a different file name and hyperlink to the particular video file. See an example here: http://www.edgesz28.com/edgesz28/makemovies.htm (at the bottom of the page). This works okay with only a few files, but what if you have many links and the list is expected to grow? How can you have it so that numerous links can play on the same page?

Well, by using the “Inline Frame” method, you can have a “master” page that has all your various selections listed on one page, and an embedded video player that plays different videos each time a different link is selected, all on the same page.

By using some tables and an “Inline Frame”, this can be done very easily. The inline frame is found under Insert in FP 2003. Here is a full blown example: http://www.edgesz28.com/edgesz28/videos.htm

On the above link, notice that the address bar never changes when playing the different videos. For example: If you click on "Blind Date", you have directed the videos.htm page to open the "blinddate.htm" page in the Inline Frame. Since the blinddate.htm page has an embedded player set to automatically play when opened, it appears that the video you picked in playing on an embedded player on the videos.htm page.

For the following example, first I inserted a table with two columns, fixing the table width to suit my layout. I set each cell to align the content to in the center and the top. Setting the cell to the top is good so that as your hyperlink list grows vertically, the player will always be at the top. In the table below, the overall width is 630px, the left cell is 220px and the right cell is 410px. The right cell size allows the inline frame to be sized to eliminate scrolling bars and show the entire embedded the player, including controls.
 

Then I inserted the Inline Frame into the right cell. When you first insert the Inline Frame, is it a small size by default, but this is easily changed by the Inline Frame properties. You have to choose between setting an “Initial Page”, or a “New Page”. I had already set up my initial page, so I clicked on that button and another screen pops up that allows you to browse for the initial file. For my application, I had a file called “startpage.htm” already established.

After the Inline Frame is inserted, you can turn-off the scrolling bars, set the alignment, the size of the inline frame, add a border, etc. after it is inserted. To do this, double click on the border line and the following screen will appear:After the Inline Frame is inserted, you can turn-off the scrolling bars, set the alignment, the size of the inline frame, add a border, etc. after it is inserted. To do this, double click on the border line and the following screen will appear:

The code looks like this in my example:

<iframe name="I1" src="jokes/startpage.htm" width="350" height="315" align="center" scrolling="no"

border="0" frameborder="0" style="border: 1px solid #000000">Your browser does not support inline

frames or is currently configured not to display inline frames.</iframe>

Now notice that “Initial Page” is set to “jokes/startpage.htm” in my example. If you do not set the initial page to a non-video “your_name.htm” page, your main video page will start one of the videos automatically. I made a simple page that has a 320 x 285 px table with a message typed in the center (see picture below). This is what appears in the box in lieu of the video when you first open my “videos.htm” page.

Here is what it looks like when it is complete.

Now, when you click on one of the hyperlinks to the left, it plays a linked video page in the Inline Frame. The individual “video_your_name.htm” pages are nothing more than an embedded video player as described on page one. To link to the video pages, set up your hyperlink “Target Frame” to “I1” (see picture below). It is also a good idea to add “#top” to the end of your link, so that as your list grow taller than the player, when you click on a bottom link, it will go to the top of the player so that the entire screen is visible.

You can also use the embedded player to play audio files on the same page. Again, this eliminates the need for Windows Media Player opening up on the user’s computer.

Good luck setting up your video pages. Author, Ed Jean 12/06/05.

Added 07/04/06
In the example above, I have a "startpage" that says to click on a link to the left to play. The hyperlinks on the left reference the inline frame (I1) as the target. But you can also have the hyperlink contained within the "startpage" itself. This would work great for a single video.

In the example below, I created another inline reference page called "startpage-blinddate.htm". It references the same "blinddate.htm" file that contains the embedded media player. It will not start until you click on the hyperlink. This method is convenient if you want to have a photo and/or some descriptive text in the window prior to the video starting.

Using a Pop-Up Window to Play the Embedded Video

"Blind Date"

You still need the file containing the embedded media player, but you can use the following code to make a pop-up window that will play the embedded file. Again, for this example I am referring to "blinddate.htm".

<a href="#" onClick="MyWindow=window.open('jokes/blinddate.htm','MyWindow','toolbar=no,

location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=340,

height=300,left=100,top=25'); return false;">"Blind Date"</a>

If you have any questions, comments or suggestions; please (mail@edgesz28.com)
 

Good luck, Ed

www.edgesz28.com

www.mycommitment.com

www.frontpagewebmaster.com

Get Firefox here (it's FREE!) and make it even faster by following the instructions posted here.  More information on Firefox: http://www.techsupportalert.com/firefox.htm