时间戳

首页 > 解决方案 > 如何在按下按钮时更改视频

javascript - 如何在按下按钮时更改视频

问题描述

我目前正在帮助一位朋友建立一个他正在尝试建立的网站。他为“流叠加”做设计。我想创建一个选项来更改在 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>

这是必须单击的按钮。

标签： javascripthtml

解决方案

您需要src在<source>点击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>

推荐阅读