javascript - 画像の要素をクリックしたときにビデオを再生する

Question

画像の要素をクリックするとビデオを再生し、同じ画像の別の要素をクリックすると別のビデオを再生できるかどうかを知りたいですか?

たとえば、部屋の写真を想像してください。

• テレビが置かれている場所をクリックすると、画像が消えて video1 が始まります。
• 椅子をクリックすると、同じことですが、代わりに video2 が開始されます。

これは HTML5 と Javascript を使用して可能ですか? もしそうなら、どうすればいいですか？

Answer 1

Yes, it is possible.

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>

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" />

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