Firefox 36.0 / Linux Does not play WebVTT from my own local server

Question

First of all, my firefox can play webvtt subtitle for all the online html5 video examples I tested.

I have a media server: 127.0.0.1:20001, and the media path is, http://127.0.0.1:20001/file/abc.mp4

The webvtt path is: http://127.0.0.1/20001/file/abc.vtt

My Testing html is like,

<video controls width="480" height="270" crossorigin="anonymous">
   <source src='http://127.0.0.1:20001/file/132416.mp4' />
   <track label="English" kind="subtitles" srclang="en" src='http://127.0.0.1:20001/file/132416.vtt' />
   This video format is not supported.
</video>

My firefox did request the vtt file together with the video. From console Log, it is something like,

Request URL:    http://127.0.0.1:20001/file/132416.vtt
Request Method:     GET
Status Code:    HTTP/1.0 200 OK

Request Headers 06:41:56.000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:36.0) Gecko/20100101 Firefox/36.0
Host:   127.0.0.1:20001
Connection: keep-alive
Cache-Control:  max-age=0
Accept-Language:    en-US,en;q=0.5
Accept-Encoding:    gzip, deflate
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Response Headers Δ0ms
Content-Type:   text/vtt
Content-Range:  bytes 0-120/121
Content-Length: 121
Access-Control-Allow-Origin:    *

Response Body Δ0ms
WEBVTT 1 00:00:00.000 --> 00:00:00.903 abc 2 00:00:00.903 --> 00:00:05.553 def

Note that, the respond body in above does not have line breaks (the file did have, it might be the firefox console display ignores line break).

My Chrome in Linux can successfully play the video and the subtitle.

The firefox only play the video without subtitle. And the console did not show any warnings or errors.

May I know what shall I do to know why my Firefox does not display anything in my case? Any hints or procedures to check any debugging logs etc. are very helpful.

Thanks.

Answer 1

I was in the same boat. What worked for me was a combination of using the default attribute and also removing the trailing slash from the track element (noticed that Mozilla omitted it in their blog on WebVTT):

<video controls width="480" height="270" crossorigin="anonymous">        
    <source src='http://127.0.0.1:20001/file/132416.mp4' /> 
    <track label="English" kind="subtitles" srclang="en" src='http://127.0.0.1:20001/file/132416.vtt' default> 
    This video format is not supported. 
</video>