javascript - 使用按钮 html 更改视频源

Question

我正在尝试通过单击按钮来更改视频源。目的是用户可以单击按钮(即视频标题)，他们想要的视频就会出现。我正在努力让这段代码发挥作用。视频 1 出现，但没有任何按钮起作用。

有人知道我哪里出了问题吗？谢谢

html

<button onClick="changevid('videos/vid1.mp4')">Video 1</button>
<button onClick="changevid('videos/vid2.mp4')">Video 2</button>
<button onClick="changevid('videos/vid3.mp4')">Video 3</button>

<video controls id="change">
  <source src="videos/Vid1.mp4" type="video/mp4"></source>
</video>

JS

<script language="javascript" type="text/javascript"> 

function changevid(buttonLink) {

document.getElementById('change').src = buttonlink;

}

</script>

Answer 1

您需要注意拼写/区分大小写。您已经传入了buttonLink(大写的L)，并且将该值分配给src，但拼写为小写的l。这些事情确实有所作为! (vid1.mp4/Vid1.mp4也出现同样的错误)

这是一个工作 fiddle (链接到我网站上的视频 - 只有第一个视频有效)。如果您单击视频 1 按钮，您将看到视频更新。但是，如果您将 buttonLink 中的大写字母更改为小写字母，您将发现该代码将不起作用。

希望这有帮助