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

tp5buhyn  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(107)

我想知道当你点击图像的一个元素时是否可以播放一个视频,如果你点击同一图像的另一个元素,是否可以播放另一个视频?
例如,想象一个房间的图片:

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

使用HTML5和Javascript有可能吗?如果有,我该怎么做?

tktrz96b

tktrz96b1#

是的,有可能。
我假设你对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();
}

相关问题