3

I want to know if it's possible to play a video when you click on an element of an image, and play another video if you click on another element of the same image ?

For instance, imagine a picture of a room :

  • if I click on the area where the TV set is, the image disappears and video1 starts.
  • if I click on the chair, same thing but video2 starts instead.

Is this possible using HTML5 and Javascript? If so, how am I going to do that ?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
0x17
  • 131
  • 1
  • 3
  • 10
  • With js you can find out the mouse position relative to your image. Then secondly check if your coordinates are within that range e.g. 100 every div then has its onclick action wich let the video pop up (z-index) or links to the video – F. Müller May 18 '13 at 16:51
  • Thanks for your answer, I like the mouse position function idea but what happens if my videos/images are displayed on another computer with a different screen resolution than mine ? Mouse positions for the elements will be different right? – 0x17 May 19 '13 at 22:48

1 Answers1

0

Yes, it is possible.

I'm assuming that you have basic understanding of HTML and JavaScript. Also this will only work on browsers that have support for HTML5 and the video element specifically.

First, add a video element to your page

<video id="video" width="600">
  <source type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Then let's assume you have two images, Video 1 and Video 2

<img src="tv.png" id="video1Btn" onclick="loadVideo1()" value="Load Video 1" />
<img src="chair.png" id="video2Btn" onclick="loadVideo2()" value="Load Video 2" />

Once a button is clicked the JavaScript function as in the onclick attribute will be called.

function loadVideo1() {
 var videoEl = document.getElementsByTagName('video')[0];
 var sourceEl = videoEl.getElementsByTagName('source')[0];
 sourceEl.src = 'video1.mp4';
 videoEl.load();
}

function loadVideo2() {
 var videoEl = document.getElementsByTagName('video')[0];
 var sourceEl = videoEl.getElementsByTagName('source')[0];
 sourceEl.src = 'video2.mp4';
 videoEl.load();
}
pseudoh
  • 161
  • 4
  • I can do it with different images but I was asking if it was possible using a single image. Thank you anyway :) – 0x17 May 19 '13 at 22:49
  • 1
    You can get that done using the HTML map tag, http://www.w3schools.com/tags/tag_map.asp – pseudoh May 19 '13 at 22:57