[SOLVED] Adding HTML5 video subtitles using TTML

Adding HTML5 video subtitles using TTML

I am currently trying to play a movie with subtitles. TTML format is required. I am using examples on this page: https://msdn.microsoft.com/en-us/library/ie/jj152136%28v=vs.85%29.aspx

TTML:

<?xml version='1.0' encoding='UTF-8'?> 
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en'> 
<body> 
<div>
<p begin="00:00:01.878" end="00:00:05.334">Good day everyone, my name is John Smith</p> 
<p begin="00:00:08.608" end="00:00:15.296">This video will teach you how to<br/>build a sand castle on any beach</p> 
</div>
</body> 
</tt>

Vtt:

WEBVTT

00:00:01.878 --> 00:00:05.334
Good day everyone, my name is John Smith

00:00:08.608 --> 00:00:15.296
This video teaches you how to 
build a sand castle on any beach.

My player code is as follows:

    <video id="video" controls="" autobuffer="" autoplay="" loop="">
        <track enabled kind="captions" src="{{url}}" srclang="en" label="English Subtitles" default />
    </video>

Using the VTT format (.vtt file, text/vtt mimetype), Chrome is able to use the subtitles and displays them as expected. However, using the TTML format (.xml file, text/vtt mimetype), Chrome and Opera remove the CC button after I click to enable captions and no subtitles are shown.

I have tried adjusting the mimetype but have been getting the error "Resource interpreted as TextTrack but transferred with MIME type text/xml" a lot (tried application/xml+ttml, and some others).

My goal is to have the TTML file play subtitles just as the VTT file does.

Solution