이미지의 요소를 클릭하면 비디오가 재생됩니다.

Question

이미지의 요소를 클릭 할 때 비디오를 재생할 수 있는지 알고 싶습니다. 동일한 이미지의 다른 요소를 클릭하면 다른 비디오를 재생할 수 있습니까?

예를 들어, 방의 그림을 상상해보십시오. - TV가있는 지역을 클릭하면 이미지가 사라지고 video1이 시작됩니다. - 의자를 클릭하면 같은 일을하지만 video2가 대신 시작됩니다.

HTML5와 자바 스크립트를 사용하면 가능합니까? 그렇다면 어떻게해야합니까?

읽어 주셔서 감사합니다.

Answer 1

예, 가능합니다.

HTML 및 JavaScript에 대한 기본적인 지식이 있다고 가정합니다. 또한 HTML5 및 동영상 요소를 특별히 지원하는 브라우저에서만 작동합니다.

첫째, 버튼과 자바 스크립트 기능을 클릭하면의 당신이 두 개의 이미지, 비디오 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" /> 

가 있다고 가정하자

<video id="video" width="600"> 
    <source type="video/mp4"> 
    Your browser does not support HTML5 video. 
</video> 

그런 다음 페이지에 비디오 요소를 추가 onclick 속성이 호출됩니다.

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(); 
}