Javascript 单击按钮更改视频（多个按钮）

我正在尝试用各种其他选项更改视频，想法是用户单击他们想要观看的视频的按钮，它将替换视频区域中的当前视频

我想用一个简单的java脚本来实现这一点，因为以后会添加更多的视频，所以我不想在java脚本中包含一大堆链接。我希望使用某种类型的this函数，但我认为我在这方面的知识还没有达到最新的速度

有人能帮忙解决这个问题吗

HTML

Video 1
视频2
视频3
视频2

JS

函数changevid（）{
document.getElementById（'change'）.src=buttonlink；
}

提前感谢,

---

菲尔

我可以想出很多方法来做到这一点。您的方法是有效的，但只需要进行一些调整即可

要使您的方法首先工作，您需要更改

changeVid

方法以获取参数，否则您将无法将视频链接/id传递给该方法

所以改变

function changevid(){

到

然后是线

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

将实际用作

按钮链接

现在有一个值

最后一个更改是将视频位置用引号“”括起来，以便它们作为字符串传递给changevid方法

所以

Video 1

变成

<button onClick="changevid('vid/Video1.mp4')">Video 1</button>

Video 1

以字符串形式传递url

Video 1

函数必须接收参数

函数更改vid（按钮链接）{

id属性应位于视频标签上

---

多个视频和多个按钮在下面简单使用

Html

视频1
视频2
视频3

JavaScript

<script>
 const v = document.getElementById("vid");
 const s = document.getElementById("src");
 
 function changeVideo1() { 
    s.src = 'video1.mp4';
    v.load();
    v.play();
 }

 function changeVideo2() { 
    s.src = 'video2.mp4';
    v.load();
    v.play();
 }
 function changeVideo3() { 
    s.src = 'video3.mp4';
    v.load();
    v.play();
 }
 
 document.getElementById("change1").onclick=changeVideo1;       
 document.getElementById("change2").onclick=changeVideo2; 
 document.getElementById("change3").onclick=changeVideo3; 
</script>

const v=document.getElementById（“vid”）；
const s=document.getElementById（“src”）；
函数changeVideo1（）{
s、 src='video1.mp4'；
v、 加载（）；
v、 play（）；
}
函数changeVideo2（）{
s、 src='video2.mp4'；
v、 加载（）；
v、 play（）；
}
函数changeVideo3（）{
s、 src='video3.mp4'；
v、 加载（）；
v、 play（）；
}
document.getElementById（“change1”）.onclick=changeVideo1；
document.getElementById（“change2”）.onclick=changeVideo2；
document.getElementById（“change3”）.onclick=changeVideo3；

谢谢，我尝试了所有方法，但似乎我遗漏了（'vid/video1.mp4'）引号，没有想到移动id。感谢您的回复，这是有效的，但只有当我将id=更改为视频标记时，我才注意到@augustine response。我发现这种有趣的行为，但效果非常好！

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

<button onClick="changevid(vid/Video1.mp4)">Video 1</button>

<button onClick="changevid('vid/Video1.mp4')">Video 1</button>

<video id="vid" controls autoplay style="width:75%">
    <source id="src" src="video2.mp4" type="video/mp4">
 </video><br/><br/>
 <button id="change1">video1</button>
 <button id="change2">video2</button>
 <button id="change3">video3</button>
    
  
 </div>

<script>
 const v = document.getElementById("vid");
 const s = document.getElementById("src");
 
 function changeVideo1() { 
    s.src = 'video1.mp4';
    v.load();
    v.play();
 }

 function changeVideo2() { 
    s.src = 'video2.mp4';
    v.load();
    v.play();
 }
 function changeVideo3() { 
    s.src = 'video3.mp4';
    v.load();
    v.play();
 }
 
 document.getElementById("change1").onclick=changeVideo1;       
 document.getElementById("change2").onclick=changeVideo2; 
 document.getElementById("change3").onclick=changeVideo3; 
</script>