我想知道是否可以在单击图像的某个元素时播放一个视频,并在单击同一图像的另一个元素时播放另一个视频?
例如,想象一张房间的图片:
- 如果我点击电视机所在的区域,图像就会消失并且 video1 开始。
- 如果我点击椅子,同样的事情,但 video2 会开始。
使用 HTML5 和 Javascript 可以吗?如果是这样,我该怎么做?
最佳答案
是的,这是可能的。
我假设您对 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();
}
关于javascript - 单击图像的元素时播放视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16626673/