如何在按下按鈕時更改視頻

Question

我目前正在幫助一位朋友建立一個他正在嘗試建立的網站。 他為“流疊加”做設計。 我想創建一個選項來更改 html 視頻 onClick 上顯示的視頻。 一個例子是own3d.tv 上的交互式展示。 到目前為止，我所做的代碼如下：

<video id="alert-player" class="vid_1" 
    <source id="blank_video_alrtp" src='unknown' type='video/webm'/>
</video>

以上是視頻的代碼。

var alertPlayVideo = document.getElementById('alert-player');
  document.getElementById('new-follow-btn').addEventListener('click', function() {
  document.getElementById('blank_video_alrtp').src = 'https://eragedesigns.com/wp-content/uploads/2021/05/new-follower.webm';
  });
  alertPlayVideo.load();
  alertPlayVideo.play():
</script>```
/*That one was the event listener I set up*/

<button id="new-follow-btn" >FOLLOWER<br>ALERT</button>

這是必須單擊的按鈕。

Answer 1

您需要在點擊時設置<source>的src ，然后load()和play()視頻。

 var alertPlayVideo = document.getElementById('alert-player'); //The <video> tag var blankVideoAlert = document.getElementById('blank_video_alrtp'); // The <source> tag inside <video> tag document.getElementById('new-follow-btn').addEventListener('click', function() { blankVideoAlert.src = 'https://eragedesigns.com/wp-content/uploads/2021/05/new-follower.webm'; alertPlayVideo.load(); alertPlayVideo.play(); });

 <video id="alert-player" class="vid_1"> <source id="blank_video_alrtp" type='video/webm'/> </video> <br> <button id="new-follow-btn">FOLLOWER<br>ALERT</button>