Video Clip Load

Onclick change video clip in page

Page 1 of 1

0 Replies - 1034 Views - Last Post: 04 October 2007 - 10:00 PM

#1 athyzafiris  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 04-October 07

Video Clip Load

Posted 04 October 2007 - 10:00 PM

I have created these one file to display video clips after reading some books on web site development for video clips. Basically i have about 10 video clips that i want to list on the same page that the video clip is being played on. onclick of a different video clip i want the page to reload and show the clicked video clip and start playing.



I have created file that i have to run the page is play_video.htm and has the below code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Video Clip</title>
<script type="text/javascript">
function setSrc(clip){
	var r = document.getElementByTagName('param');
document.write(r);
	var x = r[0].getElementByName('name');
	document.write(x);
document.write(clip);
}
</script>
<style type="text/css">
body { 
padding-top:10;
padding-bottom:0;
padding-left:10;
padding-right:0;
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0;
}

#video_clip
{
	border:1px solid #C0C0C0;
	height:276px;
	width:690px;	
}
object
{
	margin-top:10px;
	margin-left:10px;
	padding-bottom:10px;
}

#video_displays
{
	margin-left:5px;
	margin-top:10px;
	margin-right:5px;
	width:390px;
	position:absolute;
	display:inline;
}

#video_list
{
	margin-top:5px;
	border:1px solid #C0C0C0;
}
#video_heading
{
	padding-top:0px;
}
#video_upload
{
}
</style>
</head>
<body>
<div id="video_clip">
<div id="video_upload">
<object id="MediaPlayer1" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/ nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows® Media Player components..." type="application/x-oleobject" width="280" height="256" align="left">
<param name="fileName" value="Halbis sect 01.wmv">
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<param name="Volume" value="-300">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="play_video.m3u" name="MediaPlayer1" width=280 height=256 autostart=1 showcontrols=1 volume=-300>
</object>
</div>
<div id="video_displays">
	<span id="video_heading">
		<table>
			<tr>
				<td rowspan="2"><img src="hsbc/logo.gif" /> </td>
				<td>Date of Interview</td>
			</tr>
				
			<tr>
				<td>Simon Kerr Interview</td>
			</tr>

		</table>
	</span>
	<div id="video_list">
	<form>
		Item 1
		<input src="hsbc/icn_play.gif" type="image" onclick="setSrc('Halbis sect 02.wmv')"/>
	</form>
	<ul>
	<li>Item 1 - Play</li>
	<li>Item 2 - Play</li>
	<li>Item 3 - Play</li>
	</ul>
	</div>
</div>
</div>
</body>
</html>


On click on Item 1 for example should load that video clip in the media player and start playing. So i have written a setSrc but i can't change the param value of the filename to the file that i want to show.

Can anyone help? I know that is may not be the ideal code but this is what i could come up with to start.

Regards
Athy

This post has been edited by athyzafiris: 05 October 2007 - 01:21 AM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1