Manipulating Videos using Jquery (Action Scripts)

mtsgill · 12-04-2012, 04:39 PM

Hi friends,

I really need your help!

I have a following task to do:

(1) Create a web page that plays an embedded video clip 1
(2) Before clip 1 ends it shall display two overlay buttons on the video saying Play clip 2 and Play clip 3
(3) when user click on Play clip 2 it shall remove both the buttons from the video and play video clip 2
(4) the same process shall be followed at the end of clip 2 and so on...

I am brand new to coding and html. Please help me.

Someone advised me to use JQuery libraries to manipulate videos. Would that help?

How can I overlay buttons at specified time on videos being played and link them to other clips?

Eg. Action Listener and other action scripts? I am very confused. Any help would be appreciated.

Thanks a million in advance.

mtsgill · 12-04-2012, 06:08 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Interactive&nbsp; Narrative Media</title>
<style type="text/css">
.auto-style1 {
	text-align: center;
}
.auto-style2 {
	font-size: 35pt;
	color: #F8F3F3;
	font-family: "Comic Sans MS";
}
</style>
<meta content="revealTrans(Duration=2.0,Transition=23)" http-equiv="Page-Enter" />
<script type='text/javascript' src='javascript/silverlight/silverlight.js'></script>
</head>

<body style="background-color: #00CCFF">

<div class="auto-style1">
	<strong><em><span class="auto-style2">Interactive </span>
	<br class="auto-style2" />
	<span class="auto-style2">Narrative Media</span><hr /></em></strong></div>
<iframe id="I1" name="I1" src="get_him_home.html" style="height: 416px">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" class="auto-style3" style="width: 461px; height: 417px">
<param name="source" value="silverlightvideos/ArchetypeTemplate.xap"/>
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<param name="enableHtmlAccess" value="true" />
<param name="enableGPUAcceleration" value="true" />
<param name="initparams" value='playerSettings = 
		<Playlist>
			<DisplayTimeCode>false</DisplayTimeCode>
<EnableCachedComposition>true</EnableCachedComposition>
<EnableCaptions>true</EnableCaptions>
<EnableOffline>true</EnableOffline>
<EnablePopOut>true</EnablePopOut>
<StartMuted>false</StartMuted>
<StartWithPlaylistShowing>false</StartWithPlaylistShowing>
<StretchNonSquarePixels>NoStretch</StretchNonSquarePixels>
			<Items>
				<PlaylistItem>
					<AudioCodec>WmaProfessional</AudioCodec>
					<Description></Description>
					<FileSize>2405606</FileSize>
					<FrameRate>25</FrameRate>
					<Height>416</Height>
					<IsAdaptiveStreaming>false</IsAdaptiveStreaming>
					<MediaSource>silverlightvideos/First Choice.wmv</MediaSource>
					<ThumbSource></ThumbSource>
					<Title></Title>
					<VideoCodec>VC1</VideoCodec>
					<Width>512</Width>
				</PlaylistItem>
			</Items>
		</Playlist>'/>
<a href="http://go2.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
			<img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none;"/>
		</a>
	</object>
<div id="silverlightvideocontainer1"></div>
&nbsp;<div id="silverlightvideocontainer"></div>

</body>

</html>

Quote:

Originally Posted by mtsgill

Hi friends,

I really need your help!

I have a following task to do:

(1) Create a web page that plays an embedded video clip 1
(2) Before clip 1 ends it shall display two overlay buttons on the video saying Play clip 2 and Play clip 3
(3) when user click on Play clip 2 it shall remove both the buttons from the video and play video clip 2
(4) the same process shall be followed at the end of clip 2 and so on...

I am brand new to coding and html. Please help me.

Someone advised me to use JQuery libraries to manipulate videos. Would that help?

How can I overlay buttons at specified time on videos being played and link them to other clips?

Eg. Action Listener and other action scripts? I am very confused. Any help would be appreciated.

Thanks a million in advance.

tempz · 12-04-2012, 08:25 PM

Homework? XD

VIPStephan · 12-04-2012, 08:59 PM

mtsgill, in the future, if you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

Also, if you’re that new to HTML then this is kinda advanced and I’d say you should have a go at simpler tasks at first. On the other hand, if this is indeed a homework assignment then you must have had something like that in your class before.