Does HTML5 Video support srt textTrack?

Asked 17/11, 2014 at 8:50 Answered 16/8, 2023 at 7:26

Solved html video subtitle srt webvtt

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

Mcclenon answered 17/11, 2014 at 8:50 Comment(0)

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.

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

Lynsey answered 17/11, 2014 at 9:41 Comment(0)

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>

Cristincristina answered 18/1, 2016 at 6:41 Comment(1)

Thx this worked great, I used this to stream a movie from my pc (WAMP) to my ipad ;) – Amorphous 9/1, 2017 at 4:51

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.

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

Lynsey answered 17/11, 2014 at 9:41 Comment(0)

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>

Nigercongo answered 10/9, 2021 at 23:42 Comment(0)

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>

Escribe answered 16/8, 2023 at 7:26 Comment(0)

Recommended topics

Hot tags