|
1 | 1 | # chewie |
2 | | -[](https://pub.dev/packages/chewie) |
| 2 | +[](https://pub.dev/packages/chewie) |
3 | 3 |  |
4 | 4 | [](https://pub.dev/packages/chewie) |
5 | 5 |
|
6 | 6 | The video player for Flutter with a heart of gold. |
7 | 7 |
|
8 | 8 | The [`video_player`](https://pub.dartlang.org/packages/video_player) plugin provides low-level access to video playback. Chewie uses the `video_player` under the hood and wraps it in a friendly Material or Cupertino UI! |
9 | 9 |
|
10 | | -## Demo |
| 10 | +## Preview |
11 | 11 |
|
12 | | - |
| 12 | +| MaterialControls | MaterialDesktopControls | |
| 13 | +| :--------------: | :---------------------: | |
| 14 | +|  |  | |
| 15 | + |
| 16 | +### CupertinoControls |
| 17 | + |
13 | 18 |
|
14 | 19 | ## Installation |
15 | 20 |
|
@@ -51,6 +56,116 @@ void dispose() { |
51 | 56 | } |
52 | 57 | ``` |
53 | 58 |
|
| 59 | +## Options |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +Chewie got some options which controls the video you provide. These options appear on default on a `showModalBottomSheet` (like you already know from YT maybe). Chewie is passing on default `Playback speed` and `Subtitles` options as an `OptionItem`. |
| 64 | + |
| 65 | +To add additional options just add these lines to your `ChewieController`: |
| 66 | + |
| 67 | +```dart |
| 68 | +additionalOptions: (context) { |
| 69 | + return <OptionItem>[ |
| 70 | + OptionItem( |
| 71 | + onTap: () => debugPrint('My option works!'), |
| 72 | + iconData: Icons.chat, |
| 73 | + title: 'My localized title', |
| 74 | + ), |
| 75 | + OptionItem( |
| 76 | + onTap: () => |
| 77 | + debugPrint('Another option working!'), |
| 78 | + iconData: Icons.chat, |
| 79 | + title: 'Another localized title', |
| 80 | + ), |
| 81 | + ]; |
| 82 | +}, |
| 83 | +``` |
| 84 | + |
| 85 | +If you don't like to show your options with the default `showModalBottomSheet` just override the View with the `optionsBuilder` method: |
| 86 | + |
| 87 | +```dart |
| 88 | +optionsBuilder: (context, defaultOptions) async { |
| 89 | + await showDialog<void>( |
| 90 | + context: context, |
| 91 | + builder: (ctx) { |
| 92 | + return AlertDialog( |
| 93 | + content: ListView.builder( |
| 94 | + itemCount: defaultOptions.length, |
| 95 | + itemBuilder: (_, i) => ActionChip( |
| 96 | + label: Text(defaultOptions[i].title), |
| 97 | + onPressed: () => |
| 98 | + defaultOptions[i].onTap!(), |
| 99 | + ), |
| 100 | + ), |
| 101 | + ); |
| 102 | + }, |
| 103 | + ); |
| 104 | +}, |
| 105 | +``` |
| 106 | + |
| 107 | +Your `additionalOptions` are already included here (if you provided `additionalOptions`)! |
| 108 | + |
| 109 | +Last but not least: What is an option without proper translation. To add your strings to them just add: |
| 110 | + |
| 111 | +```dart |
| 112 | +optionsTranslation: OptionsTranslation( |
| 113 | + playbackSpeedButtonText: 'Wiedergabegeschwindigkeit', |
| 114 | + subtitlesButtonText: 'Untertitel', |
| 115 | + cancelButtonText: 'Abbrechen', |
| 116 | +), |
| 117 | +``` |
| 118 | + |
| 119 | +## Subtitles |
| 120 | + |
| 121 | +> Since version 1.1.0 chewie supports subtitles. Here you can see how to use them |
| 122 | +
|
| 123 | +You can provide an `List<Subtitle>` and customize your subtitles with the `subtitleBuilder` function. |
| 124 | + |
| 125 | +Just add subtitles as following code is showing into your `ChewieController`: |
| 126 | + |
| 127 | +```dart |
| 128 | +ChewieController( |
| 129 | + videoPlayerController: _videoPlayerController, |
| 130 | + autoPlay: true, |
| 131 | + looping: true, |
| 132 | + subtitle: Subtitles([ |
| 133 | + Subtitle( |
| 134 | + index: 0, |
| 135 | + start: Duration.zero, |
| 136 | + end: const Duration(seconds: 10), |
| 137 | + text: 'Hello from subtitles', |
| 138 | + ), |
| 139 | + Subtitle( |
| 140 | + index: 1, |
| 141 | + start: const Duration(seconds: 10), |
| 142 | + end: const Duration(seconds: 20), |
| 143 | + text: 'Whats up? :)', |
| 144 | + ), |
| 145 | + ]), |
| 146 | + subtitleBuilder: (context, subtitle) => Container( |
| 147 | + padding: const EdgeInsets.all(10.0), |
| 148 | + child: Text( |
| 149 | + subtitle, |
| 150 | + style: const TextStyle(color: Colors.white), |
| 151 | + ), |
| 152 | + ), |
| 153 | +); |
| 154 | +``` |
| 155 | + |
| 156 | +The `index` attribute is just for purpases if you want to structure your subtitles in your database and provide your indexes here. `start`, `end` and `text` are here the key attributes. |
| 157 | + |
| 158 | +The Duration defines on which part of your video your subtitles should start and end. For example: Your video is 10 minutes long and you want to add a subtitle between: `00:00` and `00:10`'th second you've to provide: |
| 159 | + |
| 160 | +```dart |
| 161 | +Subtitle( |
| 162 | + index: 0, |
| 163 | + start: Duration.zero, |
| 164 | + end: const Duration(seconds: 10), |
| 165 | + text: 'Hello from subtitles', |
| 166 | +), |
| 167 | +``` |
| 168 | + |
54 | 169 | ## Example |
55 | 170 |
|
56 | 171 | Please run the app in the [`example/`](https://github.com/brianegan/chewie/tree/master/example) folder to start playing! |
@@ -80,9 +195,36 @@ final playerWidget = Chewie( |
80 | 195 | ); |
81 | 196 | ``` |
82 | 197 |
|
83 | | -## iOS warning |
| 198 | +## Roadmap |
| 199 | + |
| 200 | +- [x] MaterialUI |
| 201 | +- [x] MaterialDesktopUI |
| 202 | +- [x] CupertinoUI |
| 203 | +- [x] Options with translations |
| 204 | +- [x] Subtitles |
| 205 | +- [x] CustomControls |
| 206 | +- [x] Auto-Rotate on FullScreen depending on Source Aspect-Ratio |
| 207 | +- [x] Live-Stream and UI |
| 208 | +- [x] AutoPlay |
| 209 | +- [x] Placeholder |
| 210 | +- [x] Looping |
| 211 | +- [x] Start video at |
| 212 | +- [x] Custom Progress-Bar colors |
| 213 | +- [x] Custom Overlay |
| 214 | +- [x] Allow Sleep (Wakelock) |
| 215 | +- [x] Playbackspeed Control |
| 216 | +- [x] Custom Route-Pagebuilder |
| 217 | +- [x] Custom Device-Orientation and SystemOverlay before and after fullscreen |
| 218 | +- [x] Custom ErrorBuilder |
| 219 | +- [ ] Support different resolutions of video |
| 220 | +- [ ] Re-design State-Manager with Provider |
| 221 | +- [ ] Screen-Mirroring / Casting (Google Chromecast) |
| 222 | + |
| 223 | + |
| 224 | +## iOS warning |
| 225 | +The video_player plugin used by chewie will only work in iOS simulators if you are on flutter 1.26.0 or above. You may need to switch to the beta channel `flutter channel beta` |
| 226 | +Please refer to this [issue](https://github.com/flutter/flutter/issues/14647). |
84 | 227 |
|
85 | | -The video player plugin used by chewie is not functional on iOS simulators. An iOS device must be used during development/testing. Please refer to this [issue](https://github.com/flutter/flutter/issues/14647). |
86 | 228 |
|
87 | 229 |
|
88 | 230 | ``` |
|
0 commit comments