javascript - 单击图像的元素时播放视频。

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

例如，想象一个房间的图片：
 -如果单击电视机所在的区域，图像会消失，并且video1开始。
 -如果我在椅子上单击，则相同，但video2开始。

使用HTML5和Javascript是否可以？如果是这样，我该怎么做？

非常感谢您的阅读！

最佳答案

对的，这是可能的。

我假设您对HTML和JavaScript有基本的了解。而且，这仅在支持HTML5和特定于video元素的浏览器上有效。

首先，将视频元素添加到您的页面

<video id="video" width="600">
  <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();
}

关于javascript - 单击图像的元素时播放视频。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16626673/