Does HTML5 Video support srt textTrack?

Question

I have tried the html5 video with textTrack, it works properly with .vtt (WebVTT). However, it doesn't work with .srt.

So my question is whether html5 support .srt on the chrome or firefox?

I have looked the information in w3 but there are no information about srt.

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

I have also investigated on some players. Most of them parse the .srt instead of the html5 video textTrack.

So I want to find if any document about .srt subtitle format in the native html5 player.

Thanks

Answer 1

I don't think SRT's are natively supported, but you have two options.

1) Use a library like videosub which is just one include in your HTML file and the SRT's just work via JavaScript.

or

2) Use a service like Caption Converter to convert your SRT files to VTT.

Answer 2

I wrote a simple script which will add support for .srt subtitles. You can grab it from here: https://github.com/redbullzuiper/SRT-Support-for-HTML5-videos

It converts .srt files to a .vtt file on the fly. Just add the subtitles like you usualy would.

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

Answer 3

Assuming your SRT file is straightforward, you only need to add WEBVTT at the beginning of the file content. Here's an example:

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

Answer 4

Yes , you are correct. .srt is not working with html5, but .vtt does . if we use .srt then we may need a special player. But we can simply convert .srt to .vtt .

There isn't much difference between those two,it is Only the way they represent milliseconds. And also there is a WEBVTT in the beginning of .vtt files . (online converter https://atelier.u-sub.net/srt2vtt/) i.e.

**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?

Final code block for html5 is like below

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