logo标签列表

HTML5视频支持SRT字幕轨道吗？

htmlvideosubtitlesrtwebvtt
14
我已经尝试了使用textTrack的HTML5视频，它可以正常工作并支持.vtt（WebVTT）格式。然而，它不支持.srt格式。
所以我的问题是，HTML5在Chrome或Firefox上是否支持.srt格式？
我在w3上查找了相关信息，但没有关于srt格式的信息。

http://www.w3.org/TR/html5/embedded-content-0.html#attr-track-kind-subtitles

我还调查了一些播放器。他们大多数解析.srt而不是html5视频的textTrack。

所以我想找到关于原生html5播放器中.srt字幕格式的任何文档。

谢谢

4个回答
18

是的，你说得对。 .srt 在html5中无法使用，但是.vtt可以。 如果我们使用.srt，则可能需要一个特殊的播放器。 但是我们可以简单地将.srt转换为.vtt。

这两者之间几乎没有什么区别， 只是它们表示毫秒的方式不同。并且.vtt文件开头有一个WEBVTT。（在线转换器https://atelier.u-sub.net/srt2vtt/） 即。

**srt**
3
00:00:06,071 --> 00:00:08,926
Firstly, when to use it.
When are the best times?

**vtt**
3
00:00:06.071 --> 00:00:08.926
Firstly, when to use it.
When are the best times?

HTML5的最终代码块如下所示：

<html>
<video id="video" controls preload="metadata">
   <source src="3798-233163.mp4" type="video/mp4">
   <track label="English" kind="subtitles" srclang="en" src="3798-233163.vtt" default>
   <track label="Deutsch" kind="subtitles" srclang="de" src="3798-233163_1.vtt">
   <track label="Español" kind="subtitles" srclang="es" src="3798-233163_2.vtt">
</video>
</html>
2
谢谢，这个方法很好用。我用它将电影从我的PC（WAMP）流到了我的iPad上 ;) - danielgc
3
我不认为原生支持SRT，但你有两个选择。
1）使用像videosub这样的库，它只需要在您的HTML文件中包含一个文件，并且通过JavaScript即可轻松使用SRT。
或者
2）使用像Caption Converter这样的服务将您的SRT文件转换为VTT。
2
我写了一个简单的脚本，可以为 HTML5 视频添加对 .srt 字幕的支持。你可以从这里获取：https://github.com/redbullzuiper/SRT-Support-for-HTML5-videos 它可以实时将 .srt 文件转换为 .vtt 文件。只需像平常一样添加字幕即可。
<video width="320" height="240" controls>
    <source src="/path/to/your/video.mp4" type="video/mp4">
    <source src="/path/to/your/video.ogg" type="video/ogg">

    <track label="English" kind="subtitles" srclang="en" src="subtitle-en.srt" default />
    <track label="Deutsch" kind="subtitles" srclang="de" src="subtitle-de.srt" />
    <track label="Español" kind="subtitles" srclang="es" src="subtitle-es.srt" />
</video>
0
假设您的SRT文件很简单，您只需要在文件内容开头添加WEBVTT。以下是一个示例： 

<input type="button" onclick="VideoAddCaption()" value="Demo">

<h2>try yourself</h2>
<input type="file" placeholder="Select captions" accept=".vtt,.srt">
<div id="result"></div>

<script>
  const TestVideoSrc = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  const TestSRTText = `
1
00:00:00.000 --> 00:00:03.000
Hello

2
00:00:03.000 --> 00:09:56.000
<u>underline</u>
<b>bold</b>
<i>italic</i>
`

  async function VideoAddCaption(videoSrc = null, captionFile=null) {
    if (videoSrc === null) {
      videoSrc = TestVideoSrc
    }
    let captionContent = ""
    if (captionFile === null) {
      captionContent = TestSRTText
    } else {
      const reader = new FileReader()
      await new Promise(resolve => {
        reader.onload = (e) => {
          const content = e.target.result
          captionContent = content
          resolve()
        }
        reader.readAsText(captionFile)
      })
    }
    if (captionContent.substring(0, 6) !== "WEBVTT") { // 
      console.log("Add HEADER: WEBVTT")
      captionContent = "WEBVTT\n" + captionContent
    }
    const blobCaption = new Blob([captionContent])
    const captionBlobURL = URL.createObjectURL(blobCaption)
    const frag = document.createRange().createContextualFragment(`
        <video width="600" height="400" controls>
        <source src="${videoSrc}" type="video/mp4">
        <track src="${captionBlobURL}" kind="captions" srclang="en" label="zh_TW" default>
        </video>
        `)
    const resultElem = document.querySelector("div#result")
    resultElem.innerHTML = ""
    resultElem.append(frag)
  }

  document.querySelector("input[type=file]").onchange = async (e) => {
    const captionFile = e.target.files[0]
    VideoAddCaption(TestVideoSrc, captionFile)
  }
</script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接