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

标签 javascript html button video

我正在尝试通过单击按钮来更改视频源。目的是用户可以单击按钮(即视频标题),他们想要的视频就会出现。我正在努力让这段代码发挥作用。视频 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>

最佳答案

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

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

希望这有帮助

关于javascript - 使用按钮 html 更改视频源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59805468/

相关文章:

html - float : None not working with Media Query

html - 在 HTML 中设置 LI 标签的值

javascript - jQuery 表单不会隐藏并且函数返回未定义

Javascript 如何使用带括号的和/或运算符

html - 通过添加排序字体在表格中定位

angularjs - 更新 angular-ui 中的引导下拉按钮值和操作

forms - 输入按钮作为 SUBMIT

javascript - 等待 Block/Promise/Fetch 将 JSON 数据传递给 Svelte 组件

javascript - 是否有一个常见的地方来设置 headerStyle、HeaderTitleStyle 等

javascript - Bootstrap 工具提示不起作用?