support srt/vtt subtitle and syncing in video player flutter

Question

I want to play srt subtitles in my app. I have integrated srt_parser so far. Also, I am able to get the current position of the player by this code

  inMilliseconds = _videoPlayerController.value.position.inMilliseconds;

Here is srt parse code.

  String data = '''1
  00:00:01,600 --> 00:00:04,200
  English (US)

  2
  00:00:05,900 --> 00:00:07,999
  This is a subtitle in American English

  3
  00:00:10,000 --> 00:00:14,000
  Adding subtitles is very easy to do''';

  srtParser() {
  List<Subtitle> subtitles = parseSrt(data);
  for (Subtitle item in subtitles) {
  print(
      'inMilliseconds ${inMilliseconds}  Begin is: ${item.range.begin} and End is: 
  ${item.range.end}');
  if (inMilliseconds > item.range.begin &&
      inMilliseconds < item.range.end) {
    for (var line in item.parsedLines) {
      for (var subLine in line.subLines) {
        print(
            'myline${item.parsedLines.indexOf(line)} subline${line.subLines.indexOf(subLine)} is: ${subLine.rawString}');
        setState(() {
          videoSubtitle =
              '${item.parsedLines.indexOf(line)} ${line.subLines.indexOf(subLine)} ${subLine.rawString}';
        });
      }
    }
  } else {
    setState(() {
      videoSubtitle = null;
    });
  }
}
if (subtitles[0].parsedLines[0].subLines[1].htmlCode.b == true) {
  print('true');
}

}

So How can i sync subtitle with Video player position?

And right now I am parsing srt string. How can I parse it from srt file?

Add more tags so the question is visible to a larger audience — Standin.Wolf, Oct 31 '19 at 16:09
as a workaround, I used https://pub.dev/packages/mx_player_plugin for now. this takes video URL and srt Url as a parameter and plays video using MX player. — Ravinder Kumar, Nov 02 '19 at 17:55

score 4 · Accepted Answer · edited Nov 11 '19 at 09:26

4

For now I am using subtitle_wrapper_package

which supports vtt subtitle in the video player.

SubTitleWrapper(
  videoPlayerController: chewieController.videoPlayerController,
  subtitleController: SubtitleController(
    subtitleUrl: subtitleUrl,
    showSubtitles: true,
  ),
  subtitleStyle:
      SubtitleStyle(textColor: Colors.white, hasBorder: true),
  videoChild: Chewie(
    controller: chewieController,
  )),

Output:

edited Nov 11 '19 at 09:26

Wai Ha Lee

8,598
83
57
92

answered Nov 11 '19 at 09:12

Ravinder Kumar

7,407
3
28
54

Is there any management for buffered video? In case of video is playing and user set seek by touch from previous time is is not saving buffered video it starts over again. – Pankaj Bansal Jan 04 '20 at 07:45

support srt/vtt subtitle and syncing in video player flutter

1 Answers1

Linked