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

问题描述 投票:0回答:2

情况是这样的:

我的服务器上有一个 .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 可以吗?

php html nginx mp4
2个回答
0
投票

“可以自动执行吗?如果我请求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>

0
投票

嗯,这对我来说也很有趣:)

像这样

<video controls="" autoplay="" name="media">
        <source src="https://domain.name/file.mp4" type="video/mp4">
        <here is a script that will generate available translations (track) in the current directory ? >

我可用的 vtt 总是有这样的文件名:

file.vtt srclang="hr" label="Hrvatski" default
file.en.vtt" kind="subtitles" srclang="en" label="English"
file.ger.vtt" kind="subtitles" srclang="ger" label="German"
file.fre.vtt" kind="subtitles" srclang="fre" label="French" 

等等...

© www.soinside.com 2019 - 2024. All rights reserved.