在浏览器中自动添加 WebVTT 字幕答案

【问题标题】：Automatically add WebVTT subtitles in browser在浏览器中自动添加 WebVTT 字幕
【发布时间】：2017-08-17 10:20:17
【问题描述】：

情况如下：

我的服务器上有一个 .mp4 文件。当我向它（https://domain.name/file.mp4）发出请求时，我的浏览器会自动播放它。我在同一文件夹中有一个 file.vtt 字幕，可通过https://domain.name/file.vtt 访问）。

这是我请求 file.mp4 时得到的 html 代码：

<html>
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body style="margin: 0px;"><video controls="" autoplay="" name="media">
        <video controls="" autoplay="" name="media">
            <source src="https://domain.name/file.mp4" type="video/mp4">
        </video>
    </body>
</html>

当我在浏览器中添加此页面时：

<track label="English" kind="subtitles" srclang="en" src="https://domain.name/file.vtt" default>

字幕按预期工作。

可以自动完成吗？如果我请求file.mp4，浏览器会查找同名的vtt文件并自动添加到播放器？

我应该编写一些 php 来在每个 .mp4 文件请求中找到这些字幕吗？还有其他方法吗？

我没有在服务器端创建任何 html 代码，nginx 在请求时提供 .mp4 文件，我认为浏览器自己会渲染播放器，我错了吗？是不是只能用 Nginx 来做？

【问题讨论】：

对不起，我不明白你的问题。我已经编辑了我的帖子以使其更清晰
这里你说“同名”即file，这种情况下你可以使用变量，通过发送http请求检查文件是否存在。
是的，我知道该文件存在，我想要的是播放器将它添加到视频中。
好吧，在这种情况下，您可以使用 $filename = "file" 之类的变量并将其附加到源 src 并跟踪 src。
所以我需要用php来做，对吧？我是否应该在我的 Web 服务器 conf 中编写一条规则，以将 .mp4 请求重定向到可以执行此操作的 php 文件？

标签： php html nginx mp4

【解决方案1】：

“是否可以自动执行？如果我请求file.mp4，浏览器会查找同名的vtt文件并自动将其添加到播放器中？”

浏览器不会搜索任何未指定的文件。您必须在 html 代码的 video 标记中添加字幕文件名。

试试：

<html>
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body style="margin: 0px;"><video controls="" autoplay="" name="media">
        <video controls="" autoplay="" name="media">
            <source src="https://domain.name/file.mp4" type="video/mp4">
            <track label="English" kind="subtitles" srclang="en" src="https://domain.name/file.vtt" default>
        </video>
    </body>
</html>

【讨论】：

浏览器确实不搜索任何未指定的文件。但是网络服务器是否可以调用 php 来生成 html 代码，根据请求的 .mp4 指定可用的 .vtt 文件？
可以，只要 PHP 回显此类（生成的）HTML 代码。如果您尝试使用 PHP 代码 update your question 来获取可能的建议。