Javascript 单击图像元素时播放视频

我想知道当你点击一个图像元素时是否可以播放一个视频，如果你点击同一图像的另一个元素，是否可以播放另一个视频

例如，想象一个房间的图片：

• 如果我点击电视机所在的区域，图像将消失，video1将启动
• 如果我点击椅子，同样的事情，但视频2开始

这是否可能使用HTML5和Javascript实现？如果是这样，我该怎么做呢？

是的，这是可能的

我假设您对HTML和JavaScript有基本的了解。此外，这只适用于支持HTML5和视频元素的浏览器

首先，在页面中添加视频元素

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

---

使用js，您可以找到鼠标相对于图像的位置。然后再检查您的坐标是否在该范围内，例如100谢谢您的回答，我喜欢鼠标位置功能，但是如果我的视频/图像显示在另一台屏幕分辨率与我不同的计算机上，会发生什么情况？元素的鼠标位置将不同，对吗？我可以用不同的图像来做，但我问是否可以使用单个图像。谢谢：）你可以用HTML地图标签来完成，

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

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();
}