如何通过点击链接更改视频js源

Question

我正在尝试创建一个简单的网站，其中只有几集动漫。我有一个关于javascript的问题。如何通过单击其中一个链接更改视频源？我知道，我必须使用事件侦听器，并根据我单击的链接更改<source>，但我不太擅长编程或谷歌。我正在使用的视频播放器是"；视频js"；。

如果我能得到帮助，我会非常感激的。

视频编码部分：

<div class="sidebar">
<a href="">Episode 1</a>
<a href="">Episode 2</a>
</div>
<div class="main">
<h1>Click the "play button" to start watching!</h1>
<video
id="my_video"
class="video-js"
controls
preload="auto"
width="640"
height="300"
poster="bg2.jpg"
data-setup="{}">
<source src="1-1.mp4" type="video/mp4" />
<source src="1-1.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>

我也会添加javascript文件，但我的大脑在那里写不出任何有用的东西：(

Answer 1

请找到随附的一个小演示和代码。

https://codepen.io/hellomartin-the-scripter/pen/GRZLXJv

HTML:

<a href="#" onclick="changeSource('1-1')">Episode 1</a>
<a href="#" onclick="changeSource('1-2')">Episode 2</a>
<a href="#" onclick="changeSource('1-3')">Episode 3</a>
<!-- SOURCE TAGS -->
<source id="video-mp4" src="#" />
<source id="video-webm" src="#" />

脚本：

function changeSource(episode) {
document.getElementById("video-mp4").src=episode + '.mp4';
document.getElementById("video-webm").src=episode + '.webm';
}

Answer 2

您可以这样做：

Javascript：

function ChangeSrc(Src) {
document.getElementById('my_video').src = Src + '.mp4';
}

HTML:

<a onclick="changeSrc('1')">Episode 1</a>
<a onclick="changeSrc('2')">Episode 2</a>

哦，对不起，有人已经回答了这样的问题。很抱歉

Answer 3

我认为Ryan在这篇文章中的回答可以帮助你解决这个问题：如何更改视频源onclick？

Answer 4

您需要给源一个元素id，然后使用getElementbyid命令对其进行修改，这应该像回答这个问题一样工作

如何更改视频源onclick？