how to play video w/ built in subtitle in html5?

Question

I have mp4 and mkv files with built in subtitle that I want to play in html5 and show the built in subtitle, I have try this

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

but it doesn't work

Answer 1

media players like WindowsMediaPlayer, etc use the subtitle file in the same folder as video file to show subtitles on the screen. If that is what you are trying to do, you will need to add a track tag nested within the video tag. Look at this

Answer 2

The browser would need to support this, but to the best of my knowledge no major browser supports this for progressive video. You should consider extracting the subtitles and sideload them. There are several tools for extracting subtitles, eg CCextractor or MP4Box .

You can add them as tracks to the video element as described in the Mozilla Developer Network :

<video id="video" controls preload="metadata">
  <source src="video/sintel-short.mp4" type="video/mp4">
  <source src="video/sintel-short.webm" type="video/webm">

  <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
  <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
  <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>

However, this only works for VTT files and there might be cross-browser issues as well. There are several web players out there which also support different subtitle formats, JWPlayer or the Bitmovin Player .