单击按钮更改视频(多个按钮)
Changing Videos on Button Click (multiple Buttons)
我正在尝试使用其他各种选项更改视频,想法是用户单击他们想要观看的视频按钮,它会替换视频区域中的当前视频。
我想用一个简单的 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>
提前致谢,
菲尔
我可以想到很多方法来做到这一点。您的方法是有效的,但只需要进行一些调整即可。
要让您的方法首先起作用,您需要更改 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>
- 将 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>
下面简单地使用多个带有多个按钮的视频
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>
我正在尝试使用其他各种选项更改视频,想法是用户单击他们想要观看的视频按钮,它会替换视频区域中的当前视频。
我想用一个简单的 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>
提前致谢,
菲尔
我可以想到很多方法来做到这一点。您的方法是有效的,但只需要进行一些调整即可。
要让您的方法首先起作用,您需要更改 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>
- 将 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>
下面简单地使用多个带有多个按钮的视频
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>