Question

我正在尝试使用各种其他选项更改视频，其想法是用户点击要观看的视频按钮，然后替换视频区域中的当前视频。

我想用一个简单的java脚本来做这件事，因为稍后会添加更多视频，所以我不想在java脚本中包含一大堆链接。我希望使用某种类型的功能，但我认为我在这方面的知识尚未达到速度。

有人可以帮忙解决这个问题吗？

HTML

<button onClick="changevid(vid/Video1.mp4)">Video 1</button>
<button onClick="changevid(vid/Video2.mp4)">video 2</button>
<button onClick="changevid(vid/Video3.mp4)">Video 3</button>
<button onClick="changevid(vid/Video4.mp4)">video 2</button>

<video controls>
  <source src="vid/Video1.mp4" id="change" type="video/mp4"></source>
</video>

JS

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

function changevid(){ 

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

}

</script>

提前致谢，

菲尔

Answer 1

带有多个按钮的多个视频在下面简单使用

HTML

<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>

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>

Answer 2

我可以通过多种方式来实现这一目标。您的方法有效，但只需要进行一些调整即可。

要首先让您的方法正常工作，您需要更改changeVid方法以获取参数，否则您将无法将视频链接/ ID传递给方法。

所以改变

function changevid(){

到

function changevid(buttonLink){

然后是行;

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

实际上会起作用，因为buttonLink现在有一个值。

最后一项更改是将您的视频位置换成引号＆＃39; ＆＃39;为了让它们作为字符串传递给changevid方法。

所以

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

变为

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

Answer 3

将网址传递为字符串

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

函数必须接收参数

function changevid(buttonLink) {

id 属性应位于视频标记

<video controls id="change"> <source src="vid/Video1.mp4" type="video/mp4"></source> </video>

http://jsfiddle.net/3dp8khg3/

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

3 个答案: