HTML5 Video: Displaying two different subtitles simultaneously

I am using the standard HTML5 video subtitle functions to display subtitles (provided in srt and vtt) in the builtin HTML5 video player.

<video width="100%" height="100%" autobuffer="" controls="" preload="auto" id="media" class="media embed-responsive-item">
     <source type="video/ogg" src="podm.h264.mp4&amp;t=ogv"></source>
     <source type="video/mp4" src="podm.h264.mp4&amp;t=mp4"></source>
     <track default="" label="English" srclang="en" kind="subtitle" src="podm.h264.vtt"></track>
     <track default="" label="English" srclang="en" kind="subtitle" src="podm.h264.srt"></track>
     <p>Your browser does not support HTML5 video</p>
</video>

Now I need to have two different subtitles to be display simultaneously, so the second subtitle is displayed on top of the first subtitle.

(Unexpectedly) I can’t find any helpful information on the web for displaying more than just one subtitle within HTML5 video. I’m pretty sure I am gonna need a custom hack for that purpose.

I am looking for advice and/or references how to implement this feature (without using nonfree/windows-only libs and player like DivX).

Answer

As you understand is HTML5, there are code standars, who will want to display 2srt simultaneously ??

solution : just provide one srt that in each subtitle includes also the second subtitle as text!!

example srt script includes ENG + FR subtitles :

1
00:00:30,342 --> 00:00:33,082
I came from city
Je suis venu de la ville

2
00:00:33,202 --> 00:00:36,530
do you play football?
ne vous jouez au football?

3
00:00:36,650 --> 00:00:39,965
to pay rent
de payer le loyer

Im not sure, for linebreak, you can try to use : | or n or N