search

jhomlala / betterplayer

Better video player for Flutter, with multiple configuration options. Solving typical use cases!
Apache License 2.0
895 stars 938 forks source link

[FEATURE] Add support for .ttml subtitles file format #1213

Open guyluz11 opened 1 year ago

guyluz11 commented 1 year ago

Is your feature request related to a problem? Please describe. Subtitles can arrive in several different formats for example .srt. I want to make certain wards in the subtitles bold (maybe also colored in the future).

Describe the solution you'd like There is a subtitle format named .ttml which enhances the options that can be done with subtitles.

Describe alternatives you've considered Reading the subtitles with another subtitle package like subtitle and viewing the correct one by the time.

Additional context Here is an example of .ttml file

<?xml version="1.0" encoding="UTF-8"?>
<!-- Subtitles file created by EZConvert V version 5.2.10 -->
<tt xml:lang="en-US" xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling" xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:ttm="http://www.w3.org/ns/ttml#metadata" ttp:frameRate="24" ttp:frameRateMultiplier="1000 1001" ttp:profile="http://www.w3.org/ns/ttml/profile/imsc1/text" ttp:timeBase="media">
  <head>
    <metadata/>
    <styling>
      <style xml:id="style.center" tts:fontFamily="Arial" tts:fontSize="100%" tts:fontStyle="normal" tts:fontWeight="normal" tts:backgroundColor="transparent" tts:color="white" tts:textAlign="center"/>
    </styling>
    <layout>
      <region xml:id="region.after" tts:displayAlign="after" tts:backgroundColor="transparent" tts:origin="10% 10%" tts:extent="80% 80%"/>
      <region xml:id="region.before" tts:displayAlign="before" tts:backgroundColor="transparent" tts:origin="10% 10%" tts:extent="80% 80%"/>
    </layout>
  </head>
  <body>
    <div>
      <p style="style.center" region="region.after" begin="00:00:03:12" end="00:00:12:00">Only one or two short samples are needed<br/>to make sure the conversion basically works</p>
      <p style="style.center" region="region.before" begin="00:00:14:09" end="00:00:25:17">Cool, got it, will do it by end of next week.</p>
    </div>
  </body>
</tt>