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

Question

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

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

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

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

Answer 1

对的，这是可能的。

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

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

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