flutter video playback videoplayer with chewie

In Flutter, although the official video_player is provided to play video

Video_player official website link: video_player | Flutter Package

But video_player only has a simple playback function, and the full screen progress bar can only be realized by itself

So chewi appeared, which is a video playback library based on video_player, with video progress bar, full screen, playback speed control and other functions

chewie official website link: chewie | Flutter Package

Here's how to use these two libraries:

If your video is an online video, you need to do the following preparations

If your device is Android, you need to configure network permissions

<uses-permission android:name="android.permission.INTERNET"/>

The following locations:

If your device is IOS

Also need to configure permissions

<key>NSAppTransportSecurity</key>

First introduce the usage of video_player

1. First write in the pubspec.yaml file

video_player: ^2.4.4

As follows:

Then click Pub get in the upper right corner

As follows

2. Create a new class, as shown below

class VideoPlayWidget extends StatefulWidget {
  const VideoPlayWidget({Key? key}) : super(key: key);

  @override
  State<VideoPlayWidget> createState() => _VideoPlayWidgetState();
}

class _VideoPlayWidgetState extends State<VideoPlayWidget> {
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
  
}

3. Define VideoPlayerController

late VideoPlayerController _controller;

Initialize_controller

The following url is the URL of the video you want to play

_controller = VideoPlayerController.network(
    url)
  ..initialize().then((_) {
    setState(() {
      _controller.play();
      _controller.setLooping(false);
      if (second != null) {
        Duration duration = Duration(seconds: second!);
        _controller.seekTo(duration);
      }
    });
  });

Put the controller into VideoPlayer to play

@override
Widget build(BuildContext context) {
  return _controller.value.isInitialized
      ? VideoPlayer(_controller)
      : Container();
}

Run the project, you can see the video coming out, very simple

But at this time the video ratio is not appropriate, then we need to use AspectRatio

@override
Widget build(BuildContext context) {
  return _controller.value.isInitialized
      ? AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller))
      : Container();
}

Run the project again, you can see that the video is played at an appropriate ratio

Next, we will introduce the usage of chewie, which is similar to the usage of video_player above.

1. First write the following content in the pubspec.yaml file, because chewie is based on view_player, so view_player should also be written together

chewie: ^1.3.3

video_player: ^2.4.4

At this time, two controllers need to be defined

One for VideoPlayer and one for chewie

late VideoPlayerController _controller;

ChewieController? chewieController;

then initialize

_controller = VideoPlayerController.network(url)
  ..initialize().then((_) {
    setState(() {
      chewieController = ChewieController(
        videoPlayerController: _controller,
        autoPlay: false,
        looping: true,
        allowFullScreen: true,
        showOptions:false,
        deviceOrientationsOnEnterFullScreen: [DeviceOrientation.landscapeLeft],
        deviceOrientationsAfterFullScreen:[DeviceOrientation.portraitUp],
      );
    });
  });

Then use

@override
Widget build(BuildContext context) {
  return _controller.value.isInitialized ?ClipRRect(
    borderRadius: const BorderRadius.all(Radius.circular(5)),
    child: chewieController == null?Container():Chewie(controller: chewieController!)): Container();
}

The effect is as follows

Pay attention to the VX official account: big front-end Pro send keywords, play video, get sample code

flutter video playback videoplayer with chewie

Guess you like