2 Replies - 1138 Views - Last Post: 13 February 2012 - 08:25 PM

#1 deanna.c  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-February 12

Button to play video problem

Posted 08 February 2012 - 08:47 PM

Hello

I am a 1st year computer systems student and am having problems with a project in my web development class.
I am not asking for anyone to do it for me, i just am trying to figure out this part of it and can't find the proper help in web searches. I was wondering if someone could point me in the right direction?

I am making a website for a fake game cafe. On our site we are including videos.

I have set it up in a table (its required to have 1 in our website). In the top row i would like the videos to be displayed. In the second row i would like to have the buttons that when clicked load the video in the allotted space in the first row.

Currently i am not worrying about the tables and having it load in the correct spot. I am just trying to get a button to load a video where no video was before. I am using embedded videos in iFrames.

We have only been using XHTML and CSS so far. We JUST started Javascript today and basically know nothing of it but i have been reading ahead a tiny bit. I can use either language in my coding.

I have been playing around with the "Tryit Editor v1.5" from W3C. TryIt Editor Currently my code in that is:

<html>
<head>
     <script type="text/javascript">
     function playVideo(){
          <iframe width="420" height="315" src="http://www.youtube.com/embed/KjGfgV7rJHI" frameborder="0" 
          allowfullscreen> </iframe>
     }
     </script>
</head>
<body>
     <div id="video"> <iframe width="420" height="315" frameborder="2"> </iframe> </div>
     <input type="button" value="Play Video" id="video" onclick="playVideo()" />
</body>
</html>



Any pointers or pushes in the right direction would be awesome. Thanks all who reply!

Is This A Good Question/Topic? 0
  • +

Replies To: Button to play video problem

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3512
  • View blog
  • Posts: 10,136
  • Joined: 08-June 10

Re: Button to play video problem

Posted 08 February 2012 - 11:31 PM

a good pointer is the Javascript Error Console. (because your Javascript is erroneous.)

since you're new to JS, I recommend to read a tutorial (e.g. at tizag.com) to get used to the syntax. (note: for starters, plain HTML is not allowed inside any scripting language)

for setting up a video, also look into HTML5's <video> element (spec.)
Was This Post Helpful? 0
  • +
  • -

#3 deanna.c  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-February 12

Re: Button to play video problem

Posted 13 February 2012 - 08:25 PM

I know that code was horrible. I had been working at it for a while and started trying ridiculous things even though i knew they wouldn't work before i finally gave up and tried posting on some forums.

Thank you though. Your link didn't really help me but it worded something differently and i tried searching for that and something came up that made it make sense. I think having a break from the pc helped too... Anyways got it to work.

<table>
			<tr>
				<td colspan="4"> <iframe src="http://www.youtube.com/embed/NpoPn33bSXA" name="video" width="560" height="315" frameborder="0" allowfullscreen></iframe> </td>
			</tr>
			<tr>
				<td> <a href="http://www.youtube.com/embed/NpoPn33bSXA" target="video"> <img src="images/purepwnageTHM.png" width="100px" height="100px" /> </br> Pure Pwnage - CCS</a> </td>
				<td> <a href="http://www.youtube.com/embed/cNAdtkSjSps" target="video"> <img src="images/pongTHM.png" width="100px" height="100px" /> </br> Pong - Eisenfunk</a> </td>
				<td> <a href="http://www.youtube.com/embed/-h4zTEwgCpQ" target="video"> <img src="images/mariokartTHM.png" width="100px" height="100px" /> </br> Mario Kart IRL</a> </td>
				<td> <a href="http://www.youtube.com/embed/KjGfgV7rJHI" target="video"> <img src="images/portalTHM.png" width="100px" height="100px" /> </br> The Portal Song</a> </td>
			</tr>
		


ect ect.

:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1