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 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>
<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.
|