javascript - 如何通过单击链接更改视频 js 源

Question

我正在尝试创建一个包含很少动漫剧集的简单网站。我有一个关于 javascript 的问题。如何通过单击我的链接之一来更改视频源？我明白，我必须使用事件监听器，只需更改 <source>取决于我点击的链接，但我不太擅长编程或谷歌搜索。
我使用的视频播放器是“video 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';
}