Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Manipulating Videos using Jquery (Action Scripts)

    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.

  • #2
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here is my html code

    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 View Post
    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.
    Last edited by VIPStephan; 12-04-2012 at 08:55 PM. Reason: added code BB tags

  • #3
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Homework? XD

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •