Adding Video To My Website

[jme574]

Ok, the code below adds a player window to my webpage and plays one .mpg. The question i have is, since the player has "next" and "previous" buttons on it, how would i code it to add other files to be played after the first one?

 

 

<OBJECT id="VIDEO"

style="position:absolute; left:280;top:128;height:318px; width:386px"

CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"

type="application/x-oleobject">

 

<PARAM NAME="URL" VALUE="C:\Documents and Settings\Phillip Hollowell\My Documents\My Pictures\2004-12 (Dec)\HPIM0572.MPG">

<PARAM NAME="AutoStart" VALUE="0">

<PARAM name="uiMode" value="full">

<PARAM name="PlayCount" value="1">

<param name="rate" value="1">

<param name="balance" value="0">

<param name="currentPosition" value="0">

<param name="defaultFrame" value>

<param name="currentMarker" value="0">

<param name="invokeURLs" value="-1">

<param name="baseURL" value>

<param name="volume" value="50">

<param name="mute" value="0">

<param name="stretchToFit" value="0">

<param name="windowlessVideo" value="0">

<param name="enabled" value="-1">

<param name="enableContextMenu" value="-1">

<param name="fullScreen" value="0">

<param name="SAMIStyle" value>

<param name="SAMILang" value>

<param name="SAMIFilename" value>

<param name="captioningID" value>

<param name="enableErrorDialogs" value="0">

</OBJECT></td>

[TweezerMan]

What you'd need to do is create a playlist file and replace the link to the .mpg file in the <param name="url"> tag with the link to the playlist. The "previous" and "next" buttons in the media player will then function to play the previous and next items in the playlist.

 

The player you have coded is an embedded Windows Media Player, so you could use Windows Media Player (WMP) to create your playlist. WMP saves playlists in .wpl format by default, but you can load the playlist in WMP and do a "Save Playlist As..." to save the playlist in .wpl, .m3u, or .asx formats. (I have no idea which format is better or best.)

 

Once you have the playlist created as a file, you'll probably need to open it in a text editor and edit the file locations of the individual media files. The WMP playlists I looked at used relative paths that probably wouldn't work if the playlist file was moved or uploaded to a web server.

 

Hope this helps...

[jme574]

Thanks, that works great! right now after one vid is done it auto plays to the next and so on. Is there any way to have it stop after each vid and to have them manually click next to start the next vid.?

[TweezerMan]

The purpose of the playlist is to play the files one after the other. Even the full-blown Windows Media Player doesn't stop playing individual items when it is playing from a playlist. If you want the playback to stop at the end of each video, you're going to have to add some custom javascript programming to control the player.

 

As an example, here's some code that 1) adds a drop-down box to select .mpg's directly from (a fake playlist), 2) a 'Previous' and a 'Next' button to move backwards and forwards through this playlist, and 3) javascript code for these controls to interact with the player. Add the following just before the <object> tag for the media player:

><script type="text/javascript">
 function media_select() {
   var opt = document.getElementById('playlist');
   if (opt.selectedIndex > 0) {
     VIDEO.enabled = true;
     VIDEO.URL = opt.value;
     VIDEO.controls.play();
   } else {
     VIDEO.enabled = false;
     VIDEO.URL = '';
   }
 }
 function prev() {
   var opt = document.getElementById('playlist');
   if (opt.selectedIndex > 1) {
     opt.selectedIndex = opt.selectedIndex - 1;
   } else {
     opt.selectedIndex = opt.length - 1;
   }
   media_select();
   VIDEO.controls.play();
 }
 function next() {
   var opt = document.getElementById('playlist');
   if (opt.selectedIndex < opt.length - 1) {
     opt.selectedIndex = opt.selectedIndex + 1;
   } else {
     opt.selectedIndex = 1;
   }
   media_select();
   VIDEO.controls.play();
 }
</script>
<div style="position: absolute; left: 280px; top: 448px; width: 386px;">
<select id="playlist" onchange="media_select()">
 <option value="">::::: Choose Your Video Here :::::</option>
 <option value="http://url/to/video1.mpg">Title of mpg #1</option>
 <option value="http://url/to/video2.mpg">Title of mpg #2</option>
 <option value="http://url/to/video3.mpg">Title of mpg #3</option>
</select>
<input type="button" id="prev" value="|<<" title="Previous" onClick = "prev()" />
<input type="button" id="next" value=">>|" title="Next" onClick = "next()" />
</div>

Add additional <option> tags as necessary for each video you want available to the player. For each set of <option> tags, put the URL to each video in the 'value' attribute, and the video's title between the <option> and </option> tags.

 

In the html for the player, set the URL to an empty string:

><PARAM NAME="URL" VALUE="">

The new controls should appear just below the media player, but you can place them anywhere you want around the player or elsewhere on the page by adjusting their position in the <div> tag.

 

The Previous and Next buttons on the player won't be functional, since now there's no playlist loaded again, but the new HTML buttons will imitate their functionality.

 

When an .mpg is selected from the drop down, the javascript code will load that one .mpg file and automatically play it. At the end of the video, the player will stop.

 

When the "Previous" or "Next" buttons are clicked, the javascript code will load the previous or next video in the drop-down llist, update the drop-down list with the new selection, then automatically play it. At the end of the video, the player will stop. Clicking "Previous" or "Next" at the end of the list will wrap around to the other end of the list and select that video to play.

 

Give it a shot, see what you think...