我想知道当你点击图像的一个元素时是否可以播放一个视频,如果你点击同一图像的另一个元素,是否可以播放另一个视频?例如,想象一个房间的图片:
使用HTML5和Javascript有可能吗?如果有,我该怎么做?
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(); }
1条答案
按热度按时间tktrz96b1#
是的,有可能。
我假设你对HTML和JavaScript有基本的了解,而且这只适用于支持HTML5和视频元素的浏览器。
首先,向页面添加视频元素
然后,假设您有两个图像,视频1和视频2
单击按钮后,将调用onclick属性中的JavaScript函数。