在“video”标签中使用变量作为“src” - 使用文档的 URL 创建文件名变量答案

【问题标题】：Use variable as 'src' in 'video' tag - using document's URL to create filename variable在“video”标签中使用变量作为“src” - 使用文档的 URL 创建文件名变量
【发布时间】：2019-02-21 12:26:46
【问题描述】：

我正在尝试使用一个变量（基于与文档 URL 一起传递的参数）来使用 HTML5 视频标签播放视频。

我有一个 HTML5 页面，其中列出了一堆程序。我为位于原始 HTML 页面级别之下的目录中的每个过程创建了 .mp4 视频。这一切都是为了在 CD 或硬盘上运行；没有使用互联网或任何类型的服务器。

目前我使用<a>标签的href参数直接打开视频。这行得通，但我想知道是否最好打开第二个嵌入了视频的 HTML5 页面，因为它现在是 HTML5 的原生页面。

我想我会使用单个 HTML 页面来播放视频，视频的名称是根据用户的选择从第一个 HTML 页面发送的：HTML 页面 1 - 用户单击过程 - 打开第二个 html 页面，参数为网址结束。在第二个 HTML 页面中，解析 URL 以获取视频名称，将此变量用作视频标签中的“src”：

<video controls >
    <source src=v+".mp4" >
    Sorry, your browser doesn't support embedded videos.
</video>

但这不起作用。它似乎不理解变量。我尝试以多种方式构建变量。

相反，我的解决方案是为每个特定的 .mp4 文件创建一个 HTML 页面，并在每个单独的 HTML 页面中硬编码视频文件名。必须有一个更简单的方法。你有什么建议吗？

我只有 HTML/CSS/JavaScript 的基本知识。

【问题讨论】：

标签： html video

【解决方案1】：

您将需要使用 Javascript (a) 从 URL 中找到变量，并 (b) 在显示时将其写入文档。

下面的示例包含一些代码来获取参数，然后使用该函数获取名为v 的参数，如果存在，则使用它来编写<video> 标签：

<html>
<body>

<script>
// split the querystring parameters on the URL and find the requested one
function getParam(parameterName) {
    var result = null, tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

v = getParam("v")
if (v===null) {
    document.write("<p>You need to add a ?v={filename} to the url")
} else {
    document.write("<video controls>")
    document.write("<source src=\""+v+".mp4\" >")
    document.write("Sorry, your browser doesn't support embedded videos.")
    document.write("</video>")
}
</script>

</body>
</html>

【讨论】：

成功了！我没有意识到我需要关于用代码编写视频标签的第二部分！谢谢谢谢