如何使用不同的链接更改 html 视频源？

How do I change the html video src with different a links?

我想要一个有两个 HTML 文件的网站，第一个文件有一个 link 列表，其中每个 link 都指向另一个显示不同视频的 HTML 文件每个 link;
的来源 假设我点击了 video1，然后页面会引导我到另一个页面，自动将 src 填充到正确的视频
文件 1

<li><a href="stream.html#video1">video1</a></li>
<li><a href="stream.html#video2">video2</a></li>

file2

<video src="../video/video1">

我需要 JavaScript 还是 jQuery？如果是这样，你能解释一下或展示我如何让它发挥作用吗？

回答您最初的问题：视情况而定。如果你有一个应用程序服务器，那么你可以使用 server-side 代码来生成你的 HTML，然后你可以相应地填写 src。

但是，如果无法使用 server-side 代码执行此操作，则可以使用 client-side 代码实现。

传递 src

建议使用 URL 参数而不是散列参数传递视频信息：

<li><a href="stream.html?src=video1">video1</a></li>
<li><a href="stream.html?src=video2">video2</a></li>

获取URL参数

这是获取参数值的方法，假设它存在：

window.location.search.substring(1).split("&").map(item => item.split("=")).filter(item => (item[0] === "src"))[0][1]

确保您有第二个视频的 ID HTML

<video id="my-video">

让我们实现一个填充src的函数

function fillSrc() {
    let param = window.location.search.substring(1).split("&").map(item => item.split("=")).filter(item => (item[0] === "src"));
    if (param.length) { //the param exists
        document.getElementById("my-video").src = param[0][1];
    }
}

最后但同样重要的是，运行 加载函数

修改您的 body 标签并确保此函数 运行s:

    <body onload="fillSrc">
        <!-- some stuff -->
        <video id="my-video">
        <!-- some stuff -->
    </body>