Ga naar hoofdinhoud
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.

Met Flutter kun je de SubRip en WebVTT formaten voor ondertiteling gebruiken via de video_player package. De bestanden worden omgezet naar een ClosedCaptionFile die vervolgens getoond kunnen worden door de  video_player package.

Een manier om dit te implementeren is door het videobestand en de ondertiteling tegelijk te laden in een VideoPlayerController. Het codevoorbeeld hieronder toont een simpele versie om uit het voorbeeld van de video_player package. Een uitgebreide implementatie kan gevonden worden op de GitHub repository van 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),
    ],
  );
}
Bijdragen

Feedback?

Laat 't ons weten!