0

I'm trying to get closed captions for an HTML video.

Right now I have:

<video  width="320" height="240" id="video" controls>
<source type="video/mp4" src="file.mp4" >
<track id="video1" src="file1.srt" label="English Captions" kind="captions" srclang="en-us" default> 
</video>

I've tried a lot of variations on this, including using different caption formats like .VTT but I cannot get anything to work.I've tried multiple different browsers, but I can't even get the CC button to appear. Any idea what I'm doing work, or are there any comprehensive tutorials on it? I've found a number of tutorials online, but none of them seem to resolve the problem.

Thanks!

user3688016
  • 23
  • 1
  • 5
  • Show the contents of the `.vtt` file. – Igor Gilyazov May 29 '14 at 15:53
  • My .vtt file reads: WEBVTT 00:04.333 --> 00:08.333 Making a successful flying machine requires doing a lot of things right. 00:08.333 --> 00:12.333 Many people have tried to duplicate birds – user3688016 May 29 '14 at 18:32
  • 1
    Works fine for me in Chrome v.35. What browser do you use ? Do you recieve any error messages ? – Igor Gilyazov May 29 '14 at 18:36
  • I've tried it with Google Chrome v.35, Firefox v.29 and IE v.9 – user3688016 May 29 '14 at 19:37
  • I've found that when using Opera I get this error: Text track from origin 'file://' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access. – user3688016 May 29 '14 at 19:37
  • That had no effect. I got the same error message. – user3688016 May 29 '14 at 20:05
  • Error message is pretty much self-explanatory. If you are testing this example locally, start Chrome with `--disable-web-security` flag to avoid 'file://' origin violation. For more information about CORS, visit this [page](http://www.w3.org/TR/cors/). – Igor Gilyazov May 29 '14 at 20:05
  • I have disabled web security, but I get the same error. Any ideas there? – user3688016 May 29 '14 at 20:11
  • See https://bugs.webkit.org/show_bug.cgi?id=103110#c1 - CORS on the video element influences the track element – Silvia Nov 13 '14 at 08:07
  • `chrome.exe --disable-web-security` in cmd solved this for me. [see answers here: http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome] – Alaa M. May 09 '15 at 21:26

1 Answers1

0

Is your timed text file (.vtt file) in the same directory as the mp4 video? If yes, try using the same file name for the video and vtt files but using their respective file extensions.

user3689910
  • 1