Question

我正在尝试制作世界上最简单的html5视频播放器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ST Media Player</title>
    </head>
    <body>
        <video id="player" src="http://video-js.zencoder.com/oceans-clip.mp4" controls>
            <track kind="captions" src="_tracks/test.vtt" default>
        </video>
    </body>
</html>

完成！

现在为什么玩家会认出有字幕，但没有显示出来？我现在尝试了不同的视频和字幕文件。

Answer 1

当您在Web服务器上提供内容时，

跟踪代码正在运行。另外，不要忘记添加将mime类型设置为vtt文件的配置。这是我在IIS上运行的示例：

<video>
   <source src="video.mp4" type="video/mp4" />
   <track src="video.en.vtt" kind="subtitles" 
         label="English Subtitles" srclang="en" />
</video>

对于IIS Web.Config文件：

<configuration>
    <system.webServer>
      <staticContent>
        <remove fileExtension=".vtt" />
        <mimeMap fileExtension=".vtt" mimeType="text/vtt" />
      </staticContent>
    </system.webServer>
</configuration>

对于Tomcat服务器WEB-INF / web.xml文件：

<web-app>
  <mime-mapping>
    <extension>vtt</extension>
    <mime-type>text/vtt</mime-type>
  </mime-mapping>
</web-app>

对于Apache Server，将 .htaccess 文件添加到您的web目录，并写入该行以添加字幕mime类型：

AddType text/vtt .vtt

Answer 2

确保您的文件保存为UTF-8，以确保正确显示特殊字符

Answer 3

您需要将import sys from PyQt4 import QtGui, QtCore class MainWindow(QtGui.QMainWindow): def __init__(self): super(MainWindow, self).__init__() self.initUI() def dataReady(self): cursorOutput = self.output.textCursor() cursorSummary = self.summary.textCursor() cursorOutput.movePosition(cursorOutput.End) cursorSummary.movePosition(cursorSummary.End) processStdout = str(self.process.readAll()) # Update self.output cursorOutput.insertText(processStdout) # Update self.summary for line in processStdout: if 'TTL' in line: cursorSummary.insertText(line) self.output.ensureCursorVisible() self.summary.ensureCursorVisible() def callProgram(self): self.process.start('ping', ['127.0.0.1']) def initUI(self): layout = QtGui.QHBoxLayout() self.runBtn = QtGui.QPushButton('Run') self.runBtn.clicked.connect(self.callProgram) self.output = QtGui.QTextEdit() self.summary = QtGui.QTextEdit() layout.addWidget(self.runBtn) layout.addWidget(self.output) layout.addWidget(self.summary) centralWidget = QtGui.QWidget() centralWidget.setLayout(layout) self.setCentralWidget(centralWidget) # QProcess object for external app self.process = QtCore.QProcess(self) self.process.readyRead.connect(self.dataReady) self.process.started.connect(lambda: self.runBtn.setEnabled(False)) self.process.finished.connect(lambda: self.runBtn.setEnabled(True)) def main(): app = QtGui.QApplication(sys.argv) mainWindow = MainWindow() mainWindow.show() sys.exit(app.exec_()) if __name__ == '__main__': main()对象的mode设置为＆＃34;显示＆＃34;：

textTracks

Answer 4

好吧，如果你正在使用chrome，你可能需要从终端启动它，并输入--disable-web-security，for linux，...更多Disable same origin policy in Chrome

Answer 5

我对此没有答案，但得出的结论是服务器设置问题。 IE浏览器上的字幕在IIS上工作正常，但在IE浏览器作为客户端查看时却没有在Nginx服务器上工作。

Answer 6

尝试

<video id="player" controls>
  <source src="http://video-js.zencoder.com/oceans-clip.mp4">
  <track kind="captions" src="_tracks/test.vtt" default>
</video>

如果不存在源标记，则大多数浏览器会忽略视频标记内的其余内容。

Answer 7

我遇到了同样的问题。我没有使用任何服务器，而是将应用程序托管在AWS上。原来，您将必须在AWS中更改配置。转到AWS上目录中的字幕文件。右键单击，然后选择属性，然后定义一个名为“ type / vtt”的元数据。这应该可以解决问题。

Answer 8

Canavar的答案正确，但是对我有用的一件事就是将.vtt文件更改为.txt文件，因此您不必担心文件服务器的配置。它可以在Chrome中很好地处理隐藏式字幕。

HTML5跟踪标题未显示

8 个答案: