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

Question

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

我想用一个简单的 java 脚本来做到这一点，因为稍后会添加更多视频，所以我不想在 java 脚本中包含一大堆链接。我希望使用某种 this 功能，但我认为我在这方面的知识还没有跟上速度。

谁能帮忙解决这个问题？

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

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

要让您的方法首先起作用，您需要更改 changeVid 方法以获取参数，否则您将无法将视频 link/id 传递给该方法。

所以改变

function changevid(){

到

function changevid(buttonLink){

然后是行；

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

将实际工作，因为 buttonLink 现在有一个值。

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

所以

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

变成

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

Answer 2

将 url 作为字符串传递

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

函数必须接收参数

function changevid(buttonLink) {

id 属性应该在 video 标签上

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

http://jsfiddle.net/3dp8khg3/

Answer 3

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

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>

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

Changing Videos on Button Click (multiple Buttons)

javascript

video

onclick

button