单击图像元素时播放视频 [英] Playing a video when clicking on an element of an image
问题描述
我想知道单击图像的某个元素是否可以播放视频,如果单击同一图像的另一个元素是否可以播放另一个视频?
I want to know if it's possible to play a video when you click on an element of an image, and play another video if you click on another element of the same image ?
例如,想象一个房间的图片:
For instance, imagine a picture of a room :
- 如果我单击电视机所在的区域,则图像消失并且video1开始。
- 如果我单击椅子,是一样的,但是video2开始。
是否可以使用HTML5和Javascript?如果是这样,我该怎么做?
Is this possible using HTML5 and Javascript? If so, how am I going to do that ?
推荐答案
是的,有可能。
我假设您已经基本了解HTML和JavaScript。同样,这仅在支持HTML5和特定视频元素的浏览器上有效。
I'm assuming that you have basic understanding of HTML and JavaScript. Also this will only work on browsers that have support for HTML5 and the video element specifically.
首先,将视频元素添加到页面中
First, add a video element to your page
<video id="video" width="600">
<source type="video/mp4">
Your browser does not support HTML5 video.
</video>
然后让我们假设您有两个图像,视频1和视频2
Then let's assume you have two images, Video 1 and Video 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" />
单击按钮后,将调用JavaScript函数,如onclick属性中的那样。
Once a button is clicked the JavaScript function as in the onclick attribute will be called.
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();
}
这篇关于单击图像元素时播放视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!