Question

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

我有一个HTML5页面，其中列出了很多过程。我已经为原始HTML页面下方的目录中的每个过程创建了.mp4视频。它们全部旨在在CD或硬盘驱动器上运行；没有使用互联网或任何类型的服务器。

当前，我使用<a>标签的href参数直接打开视频。这种方法有效，但是我想知道打开嵌入视频的第二HTML5页面是否会更好，因为这现在是HTML5固有的。

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

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

但这不起作用。似乎不了解该变量。我尝试过几种方式来构建变量。

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

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

Answer 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>

将变量用作“视频”标签中的“ src”-使用文档的URL创建文件名变量

1 个答案: