Flutter Video Player with a Heart of Gold

You are currently viewing Flutter Video Player with a Heart of Gold
Video Player Plugin

Flutter Video Player with a Heart of Gold

The 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!

Preview

MaterialControls

Material Control
Material Control

MaterialDesktopControls

Material Desktop Control
Material Desktop Control

CupertinoControls

Cupertino Control
Cupertino Control

Installation

In your pubspec.yaml file within your Flutter Project:

dependencies:
  chewie: <latest_version>
  video_player: <latest_version>

Use it

import 'package:chewie/chewie.dart';
final videoPlayerController = VideoPlayerController.network(
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');

await videoPlayerController.initialize();

final chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: true,
);

final playerWidget = Chewie(
  controller: chewieController,
);

Please make sure to dispose both controller widgets after use. For example by overriding the dispose method of the a StatefulWidget:

@override
void dispose() {
  videoPlayerController.dispose();
  chewieController.dispose();
  super.dispose();
}

Options

Options
Options

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.

To add additional options just add these lines to your ChewieController:

additionalOptions: (context) {
  return <OptionItem>[
    OptionItem(
      onTap: () => debugPrint('My option works!'),
      iconData: Icons.chat,
      title: 'My localized title',
    ),
    OptionItem(
      onTap: () =>
          debugPrint('Another option working!'),
      iconData: Icons.chat,
      title: 'Another localized title',
    ),
  ];
},

If you don’t like to show your options with the default showModalBottomSheet just override the View with the optionsBuilder method:

optionsBuilder: (context, defaultOptions) async {
  await showDialog<void>(
    context: context,
    builder: (ctx) {
      return AlertDialog(
        content: ListView.builder(
          itemCount: defaultOptions.length,
          itemBuilder: (_, i) => ActionChip(
            label: Text(defaultOptions[i].title),
            onPressed: () =>
                defaultOptions[i].onTap!(),
          ),
        ),
      );
    },
  );
},

Your additionalOptions are already included here (if you provided additionalOptions)!

See also  Flutter Project with Custom Implementation of Drawer Menu

Last but not least: What is an option without proper translation. To add your strings to them just add:

optionsTranslation: OptionsTranslation(
  playbackSpeedButtonText: 'Wiedergabegeschwindigkeit',
  subtitlesButtonText: 'Untertitel',
  cancelButtonText: 'Abbrechen',
),

Subtitles

Since version 1.1.0 chewie supports subtitles. Here you can see how to use them

You can provide an List<Subtitle> and customize your subtitles with the subtitleBuilder function.

See also  Flutter WebRTC Plugin for Android/iOS

Just add subtitles as following code is showing into your ChewieController:

ChewieController(
  videoPlayerController: _videoPlayerController,
  autoPlay: true,
  looping: true,
  subtitle: Subtitles([
    Subtitle(
      index: 0,
      start: Duration.zero,
      end: const Duration(seconds: 10),
      text: 'Hello from subtitles',
    ),
    Subtitle(
      index: 1,
      start: const Duration(seconds: 10),
      end: const Duration(seconds: 20),
      text: 'Whats up? :)',
    ),
  ]),
  subtitleBuilder: (context, subtitle) => Container(
    padding: const EdgeInsets.all(10.0),
    child: Text(
      subtitle,
      style: const TextStyle(color: Colors.white),
    ),
  ),
);

The index attribute is just for purpases if you want to structure your subtitles in your database and provide your indexes here. startend and text are here the key attributes.

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:

Subtitle(
  index: 0,
  start: Duration.zero,
  end: const Duration(seconds: 10),
  text: 'Hello from subtitles',
),

Example

Please run the app in the example/ folder to start playing!

See also  Flutter Button Widget and Its Properties

Migrating from Chewie < 0.9.0

Instead of passing the VideoPlayerController and your options to the Chewie widget you now pass them to the ChewieController and pass that latter to the Chewie widget.

final playerWidget = Chewie(
  videoPlayerController,
  autoPlay: true,
  looping: true,
);

becomes

final chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: true,
);

final playerWidget = Chewie(
  controller: chewieController,
);

Credit

This project is developed by brianegan
Download this project from the below link.
https://github.com/brianegan/chewie/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/brianegan/chewie

Spread the love

Leave a Reply