[video_player] VTT Support

packages/video_player/video_player/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.2.4
+
+* Support to closed caption web vtt format added.
+
 ## 2.2.3
 
 * Fixed empty caption text still showing the caption widget.

packages/video_player/video_player/example/assets/bumble_bee_captions.vtt

@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.200 --> 00:00:01.750
+[ Birds chirping ]
+
+00:00:02.300 --> 00:00:05.000
+[ Buzzing ]

packages/video_player/video_player/example/lib/main.dart

@@ -210,8 +210,9 @@ class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
 
   Future<ClosedCaptionFile> _loadCaptions() async {
     final String fileContents = await DefaultAssetBundle.of(context)
-        .loadString('assets/bumble_bee_captions.srt');
-    return SubRipCaptionFile(fileContents);
+        .loadString('assets/bumble_bee_captions.vtt');
+    return WebVttCaptionFile(
+        fileContents); // For vtt files, use WebVttCaptionFile
   }
 
   @override

packages/video_player/video_player/example/pubspec.yaml

@@ -30,6 +30,7 @@ dev_dependencies:
 flutter:
   uses-material-design: true
   assets:
-   - assets/flutter-mark-square-64.png
-   - assets/Butterfly-209.mp4
-   - assets/bumble_bee_captions.srt
+    - assets/flutter-mark-square-64.png
+    - assets/Butterfly-209.mp4
+    - assets/bumble_bee_captions.srt
+    - assets/bumble_bee_captions.vtt

packages/video_player/video_player/lib/src/closed_caption_file.dart

@@ -5,6 +5,9 @@
 import 'sub_rip.dart';
 export 'sub_rip.dart' show SubRipCaptionFile;
 
+import 'web_vtt.dart';
+export 'web_vtt.dart' show WebVttCaptionFile;
+
 /// A structured representation of a parsed closed caption file.
 ///
 /// A closed caption file includes a list of captions, each with a start and end
@@ -15,6 +18,7 @@ export 'sub_rip.dart' show SubRipCaptionFile;
 ///
 /// See:
 /// * [SubRipCaptionFile].
+/// * [WebVttCaptionFile].
 abstract class ClosedCaptionFile {
   /// The full list of captions from a given file.
   ///
@@ -42,10 +46,14 @@ class Caption {
   final int number;
 
   /// When in the given video should this [Caption] begin displaying.
-  final Duration start;
+  ///
+  /// When the value is null, the caption object is invalid.
+  final Duration? start;
 
   /// When in the given video should this [Caption] be dismissed.
-  final Duration end;
+  ///
+  /// When the value is null, the caption object is invalid.
+  final Duration? end;
 
   /// The actual text that should appear on screen to be read between [start]
   /// and [end].

packages/video_player/video_player/lib/src/web_vtt.dart

@@ -0,0 +1,200 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:convert';
+
+import 'package:html/dom.dart';
+
+import 'closed_caption_file.dart';
+import 'package:html/parser.dart' as html_parser;
+
+/// Represents a [ClosedCaptionFile], parsed from the WebVtt file format.
+/// See: https://en.wikipedia.org/wiki/WebVtt
+class WebVttCaptionFile extends ClosedCaptionFile {
+  /// Parses a string into a [ClosedCaptionFile], assuming [fileContents] is in
+  /// the WebVtt file format.
+  /// * See: https://en.wikipedia.org/wiki/WebVtt
+  WebVttCaptionFile(this.fileContents)
+      : _captions = _parseCaptionsFromWebVttString(fileContents);
+
+  /// The entire body of the Vtt file.
+  final String fileContents;
+
+  @override
+  List<Caption> get captions => _captions;
+
+  final List<Caption> _captions;
+}
+
+List<Caption> _parseCaptionsFromWebVttString(String file) {
+  final List<Caption> captions = <Caption>[];
+
+  // Ignore metadata
+  List<String> metadata = ['HEADER', 'NOTE', 'REGION', 'WEBVTT'];
+
+  int captionNumber = 1;
+  for (List<String> captionLines in _readWebVttFile(file)) {
+    // CaptionLines represent a complete caption
+    // E.g
+    // [
+    //  [00:00.000 --> 01:24.000 align:center]
+    //  ['Introduction']
+    // ]
+    // if caption has just header or time, but no text, captionLines.length will be 1
+    if (captionLines.length < 2) continue;
+
+    // if caption has header equal metadata, ignore
+    String metadaType = captionLines[0].split(' ')[0];
+    if (metadata.contains(metadaType)) continue;
+
+    // Caption has header
+    bool hasHeader = captionLines.length > 2;
+    if (hasHeader && int.tryParse(captionLines[0]) != null) {
+      captionNumber = int.parse(captionLines[0]);
+    }
+
+    final _StartAndEnd startAndEnd = _StartAndEnd.fromWebVttString(
+      hasHeader ? captionLines[1] : captionLines[0],
+    );
+
+    final String text = captionLines.sublist(hasHeader ? 2 : 1).join('\n');
+
+    // TODO(cyanglaz): Handle special syntax in vtt captions.
+    // https://github.com/flutter/flutter/issues/90007.
+    final String textWithoutFormat = _parseHtmlString(text);
+
+    final Caption newCaption = Caption(
+      number: captionNumber,
+      start: startAndEnd.start,
+      end: startAndEnd.end,
+      text: textWithoutFormat,
+    );
+
+    if (newCaption.start != null && newCaption.end != null) {
+      captions.add(newCaption);
+      captionNumber++;
+    }
+  }
+
+  return captions;
+}
+
+class _StartAndEnd {
+  // When there's an error parsing the start or end, either could be null.
+  final Duration? start;
+  final Duration? end;
+
+  _StartAndEnd(this.start, this.end);
+
+  // Assumes format from an Vtt file.
+  // For example:
+  // 00:09.000 --> 00:11.000
+  static _StartAndEnd fromWebVttString(String line) {
+    final RegExp format =
+        RegExp(_webVttTimeStamp + _webVttArrow + _webVttTimeStamp);
+
+    if (!format.hasMatch(line)) {
+      return _StartAndEnd(null, null);
+    }
+
+    final List<String> times = line.split(_webVttArrow);
+
+    final Duration? start = _parseWebVttTimestamp(times[0]);
+    final Duration? end = _parseWebVttTimestamp(times[1]);
+
+    return _StartAndEnd(start, end);
+  }
+}
+
+String _parseHtmlString(String htmlString) {
+  final Document document = html_parser.parse(htmlString);
+  final Element? body = document.body;
+  if (body == null) {
+    return '';
+  }
+  final Element? bodyElement = html_parser.parse(body.text).documentElement;
+  if (bodyElement == null) {
+    return '';
+  }
+  return bodyElement.text;
+}
+
+// Parses a time stamp in an Vtt file into a Duration.
+// For example:
+//
+// _parseWebVttimestamp('00:01:08.430')
+// returns
+// Duration(hours: 0, minutes: 1, seconds: 8, milliseconds: 430)
+Duration? _parseWebVttTimestamp(String timestampString) {
+  if (!RegExp(_webVttTimeStamp).hasMatch(timestampString)) {
+    return null;
+  }
+
+  final List<String> dotSections = timestampString.split('.');
+  final List<String> hoursMinutesSeconds = dotSections[0].split(':');
+
+  int hours = 0;
+  int minutes = 0;
+  int seconds = 0;
+
+  if (hoursMinutesSeconds.length > 2) {
+    // Timestamp takes the form of [hours]:[minutes]:[seconds].[milliseconds]
+    hours = int.parse(hoursMinutesSeconds[0]);
+    minutes = int.parse(hoursMinutesSeconds[1]);
+    seconds = int.parse(hoursMinutesSeconds[2]);
+  } else if (int.parse(hoursMinutesSeconds[0]) > 59) {
+    // Timestamp takes the form of [hours]:[minutes].[milliseconds]
+    // First position is hours as it's over 59.
+    hours = int.parse(hoursMinutesSeconds[0]);
+    minutes = int.parse(hoursMinutesSeconds[1]);
+  } else {
+    // Timestamp takes the form of [minutes]:[seconds].[milliseconds]
+    minutes = int.parse(hoursMinutesSeconds[0]);
+    seconds = int.parse(hoursMinutesSeconds[1]);
+  }
+
+  List<String> milisecondsStyles = dotSections[1].split(" ");
+
+  // TODO(cyanglaz): Handle caption styles.
+  // https://github.com/flutter/flutter/issues/90009.
+  // if (milisecondsStyles.length > 1) {
+  //  List<String> styles = milisecondsStyles.sublist(1);
+  // }
+  int milliseconds = int.parse(milisecondsStyles[0]);
+
+  return Duration(
+    hours: hours,
+    minutes: minutes,
+    seconds: seconds,
+    milliseconds: milliseconds,
+  );
+}
+
+// Reads on Vtt file and splits it into Lists of strings where each list is one
+// caption.
+List<List<String>> _readWebVttFile(String file) {
+  final List<String> lines = LineSplitter.split(file).toList();
+
+  final List<List<String>> captionStrings = <List<String>>[];
+  List<String> currentCaption = <String>[];
+  int lineIndex = 0;
+  for (final String line in lines) {
+    final bool isLineBlank = line.trim().isEmpty;
+    if (!isLineBlank) {
+      currentCaption.add(line);
+    }
+
+    if (isLineBlank || lineIndex == lines.length - 1) {
+      captionStrings.add(currentCaption);
+      currentCaption = <String>[];
+    }
+
+    lineIndex += 1;
+  }
+
+  return captionStrings;
+}
+
+const String _webVttTimeStamp = r'(\d+):(\d{2})(:\d{2})?\.(\d{3})';
+const String _webVttArrow = r' --> ';

packages/video_player/video_player/lib/video_player.dart

@@ -581,7 +581,12 @@ class VideoPlayerController extends ValueNotifier<VideoPlayerValue> {
 
     // TODO: This would be more efficient as a binary search.
     for (final caption in _closedCaptionFile!.captions) {
-      if (caption.start <= position && caption.end >= position) {
+      final Duration? start = caption.start;
+      final Duration? end = caption.end;
+      if (start == null || end == null) {
+        continue;
+      }
+      if (start <= position && end >= position) {
         return caption;
       }
     }

packages/video_player/video_player/pubspec.yaml

@@ -3,7 +3,8 @@ description: Flutter plugin for displaying inline video with other Flutter
   widgets on Android, iOS, and web.
 repository: https://github.com/flutter/plugins/tree/master/packages/video_player/video_player
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+video_player%22
-version: 2.2.3
+version: 2.2.4
+
 
 environment:
   sdk: ">=2.12.0 <3.0.0"
@@ -32,6 +33,7 @@ dependencies:
   # TODO(amirh): Revisit this (either update this part in the design or the pub tool).
   # https://github.com/flutter/flutter/issues/46264
   video_player_web: ^2.0.0
+  html: ^0.15.0
 
 dev_dependencies:
   flutter_test: