Click on image to display video

I have a html page with placeholder to play video.
I have six different images below it. If i click on one of the images a different video should be shown in my placeholder. Any help appreciated
thanks
netdeveloper1Asked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Here is some very simple code that illustrates the concept using JQuery

<!doctype html>
<html>
<head>
<title>EE Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('a').click(function(e) {
    e.preventDefault();
    $('#video').attr('data', $(this).attr('href'));
  });
});
</script>
<style type="text/css">
</style>
<body>
  <div style="width: 458px; height: 342px">
    <object data="clip0003.flv" width="458" height="343" id="video">
    </object>
  </div>
  <div>
  <a href="clip0001.flv">One</a>
  <a href="clip0002.flv">Two</a>
  <a href="clip0003.flv">Three</a>
  </div>
</body>
</html>

Open in new window

0
 
Nancy McCulloughCommented:
Are you looking for the HTML to make an image link to a video? HTML 4 or HTML 5?
0
 
netdeveloper1Author Commented:
HTML4
I have six different images and click the image show show the video in one predefined  region . SO if the video 4 is playing and if click on image5  then video4 should be replaced with video 5
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Nancy McCulloughCommented:
http://www.w3schools.com/html/html_videos.asp

<a href="yourvideo.swf">Play My Video</a>

Looks like this:

Play My Video

and is clickable to play your video.
0
 
netdeveloper1Author Commented:
I wish it was that easy. As i mentioned in pervious messages. I need to swao videos in my place holder depending on what link is clicked
0
 
Nancy McCulloughCommented:
Another method would be to add the video as an object. This would allow you to define the placement and other attributes to the vid.

Add

target="videoDestination"

to the anchor to ensure that it displays in the correct area
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.