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

时间:2013-05-18 16:44:04

标签: javascript html5 javascript-events html5-video poster

我想知道当您点击图片元素时是否可以播放视频,如果您点击同一图片的其他元素,则可以播放另一个视频?

例如,想象一下房间的照片:   - 如果我点击电视机所在的区域,图像就会消失,视频1也会启动。   - 如果我点击椅子,同样的事情,但视频2开始了。

这可能使用HTML5和Javascript吗?如果是这样,我该怎么做呢?

非常感谢您的阅读!

1 个答案:

答案 0 :(得分:0)

是的,有可能。

我假设您对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();
}