We help IT Professionals succeed at work.

Click on image to display video

netdeveloper1
on
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
Comment
Watch Question

Are you looking for the HTML to make an image link to a video? HTML 4 or HTML 5?

Author

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

Author

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
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
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
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

Explore More ContentExplore courses, solutions, and other research materials related to this topic.