單擊圖像元素時播放視頻。

Question

我想知道當您點擊圖片的某個元素時是否可以播放視頻，並且如果您點擊同一圖片的另一個元素播放另一個視頻？

例如，想象一個房間的圖片： - 如果我點擊電視機所在的區域，圖像消失，視頻1開始播放。 - 如果我點擊椅子，同樣的事情，但video2開始。

這可能使用HTML5和Javascript嗎？如果是這樣，我該怎麼做？

非常感謝您的閱讀！

Answer 1

是的，這是可能的。

我假設您對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" /> 

一旦按鈕被點擊的JavaScript函數，如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(); 
}