单击图像元素时播放视频

Posted 2023-05-07

【中文标题】单击图像元素时播放视频

【英文标题】：Playing a video when clicking on an element of an image

【发布时间】：2013-05-13 15:54:00

【问题描述】：

我想知道是否可以在单击图像的元素时播放视频，如果单击同一图像的另一个元素则播放另一个视频？

例如，想象一张房间的照片：

如果我点击电视机所在的区域，图像消失，video1 开始播放。 如果我点击椅子，同样的事情，但会开始 video2。

这可能使用 html5 和 javascript 吗？如果是这样，我该怎么做？

【问题讨论】：

通过js你可以找到鼠标相对于你的图片的位置。然后检查您的坐标是否在该范围内，例如100 然后每个 div 都有其 onclick 动作，让视频弹出（z-index）或链接到视频

感谢您的回答，我喜欢鼠标定位功能的想法，但是如果我的视频/图像显示在另一台屏幕分辨率与我不同的计算机上会发生什么？元素的鼠标位置会不同吗？

【参考方案1】：

是的，这是可能的。

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

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

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

那么假设您有两张图片，视频 1 和视频 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" />

单击按钮后，将调用 onclick 属性中的 JavaScript 函数。

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

【讨论】：

我可以用不同的图像来做，但我在问是否可以使用单个图像。还是谢谢你:)

您可以使用 HTML 地图标记完成此操作，w3schools.com/tags/tag_map.asp