Skip to main content
Logo Appt Light

Captions on Flutter

Captions should be provided to enable users to understand what is being said in videos. Captions are a text based alternative for media, such as videos. The spoken dialogue and sound effects are displayed on screen as the video plays. Captions mostly benefit people who are deaf, hard of hearing, or deafblind. But captions are also useful to anyone who is temporarily unable to perceive sound, for example inside a library.

With Flutter, the video_player package has support for the SubRip and WebVTT formats for captions. These files will be parsed to a ClosedCaptionFile that can be interpreted by the video_player package.

One way to implement this would be to load the video file and the captions and add these to the VideoPlayerController. The implementation below shows how this is achieved in the video_player example implementation. A full implementation can be found in the GitHub repository of video_player.

late VideoPlayerController _controller;

Future<ClosedCaptionFile> _loadCaptions() async {
  final String fileContents = await DefaultAssetBundle.of(context)
    .loadString('/assets/appt.vtt');
  return WebVTTCaptionFile(
    fileContents); // For vtt files, use WebVTTCaptionFile
}

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.asset(
    '/assets/appt.mp4',     
    closedCaptionFile: _loadCaptions(),
  );

  _controller.addListener(() {
    setState(() {});
  });
  _controller.initialize();
}

@override
Widget build(BuildContext context) {
  return Stack(
    alignment: Alignment.bottomCenter,
    children: <Widget>[
      VideoPlayer(_controller),
      ClosedCaption(text: _controller.value.caption.text),
      VideoProgressIndicator(_controller, allowScrubbing: true),
    ],
  );
}

Feedback?

Let us know!