[Flutter] Video Player

video_player is simple contents player widget.

I don't know ios player name. but I know aos player name. It is ExoPlayer.

 

package name : video_player

flutter pub add video_player

 

path : https://pub.dev/packages/video_player

video_player | Flutter Package

 

If you want video file in your device gallery.

use this dart package. it is image_picker

package name : image_picker

flutter pub add image_picker

 

path : https://pub.dev/packages/image_picker

image_picker | Flutter Package

import 'package:image_picker/image_picker.dart';

    XFile? video = await ImagePicker().pickVideo(
      source: ImageSource.gallery,
    );

    final videoController = VideoPlayerController.file(
      File(widget.video.path)
    );

 

---

 

setting VideoPlayer

if you want to play the video. you shoul define a VideoPlayerController class.

path setting and create instance : VideoPlayerController.asset("[Video File Path]");

class _VideoPlayerPageState extends State<_VideoPlayerPage> {
  late VideoPlayerController _videoPlayerController;
  bool startedPlaying = false;

  @override
  void initState() {
    super.initState();

    // set video Url
    _videoPlayerController = VideoPlayerController.asset("assets/Butterfly-209.mp4");
    _videoPlayerController.addListener(_videoPlayerListener);
  }

  @override
  void dispose() {
    _videoPlayerController
      ..removeListener(_videoPlayerListener)
      ..dispose();

    super.dispose();
  }

 

 

VideoPlayerController event listener : addListener

this function will be calling when the videoPlayerController change event.

void _videoPlayerListener() {
  if (startedPlaying && !_videoPlayerController.value.isPlaying) {
    // Navigator.pop(context);
    print('_videoPlayerListener.. if conditions all true will be Navigator.pop');
  }
}

 

 

you must do init videoPlayerController.

method name : .initialize();

Future<bool> _start() async {
  await _videoPlayerController.initialize();
  await _videoPlayerController.play();
  startedPlaying = true;
  return true;
}

 

 

build Widget 

@override
Widget build(BuildContext context) {
  return Material(
    elevation: 0,
    child: GestureDetector(
      onTap: () {
        if (_videoPlayerController.value.isPlaying) {
          _videoPlayerController.pause();
        } else {
          _videoPlayerController.play();
        }
      },
      child: Center(
        child: FutureBuilder(
          future: _start(),
          builder: (context, snapshot) {
            if (snapshot.data == true) {
              return AspectRatio(
                aspectRatio: _videoPlayerController.value.aspectRatio,
                child: VideoPlayer(_videoPlayerController),
              );
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ),
      ),
    ),
  );
}

 

 

what is AspectRatio?

this class descript use English difficult. 

하나의 자식 위젯을 가지며, AspectRatio의 자식 위젯의 가로, 세로 비율을 조절하여,

부모 위젯의 크기에 대한 적절한 비율을 유지하게 해준다.

BoxFit으로 따지면, contain같은 역할과 비슷하다 할 수 있다.

use AspectRatio	not use AspectRatio

 

 

center reserve, playback, forward controller

icon : Icons.rotate_left, Icons.play_arrow, Icons.pause, Icons.rotate_right

IconButton(
  icon: const Icon(Icons.rotate_left),
  iconSize: 30.0,
  onPressed: () {

    _notTouchedControllerHide();
  },
  color: Colors.white,
),

  void onReversePressed() {
    final currentPosition = videoPlayerController!.value.position;
    Duration position = Duration();

    if (currentPosition.inSeconds > 3) {
      position = currentPosition - Duration(seconds: 3);
    }

    videoPlayerController!.seekTo(position);
  }

  void onForwardPressed() {
    final maxPosition = videoPlayerController!.value.duration;
    final currentPosition = videoPlayerController!.value.position;
    Duration position = maxPosition;

    if ((maxPosition - Duration(seconds: 3)).inSeconds > currentPosition.inSeconds) {
      position = currentPosition + Duration(seconds: 3);
    }

    videoPlayerController!.seekTo(position);
  }

 

 

slider, video position

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    const SizedBox(width: 6.0,),
    _renderTime(_videoPlayerController.value.position),
    // time
    Expanded(
      child: Slider(
        min: 0,
        max: _videoPlayerController.value.duration.inSeconds.toDouble(),
        value: _videoPlayerController.value.position.inSeconds.toDouble(),
        onChanged: (value) {
          _videoPlayerController.seekTo(Duration(seconds: value.toInt()));
        },
      ),
    ),
    _renderTime(_videoPlayerController.value.duration),

    // full screen
    IconButton(
      icon: const Icon(Icons.fullscreen),
      iconSize: 30.0,
      onPressed: () {
      },
      color: Colors.white,
    ),
  ],
),

Text _renderTime(Duration duration) {
  return Text(
    '${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}',
    style: const TextStyle(color: Colors.white),
  );
}

 

 

---

https://pub.dev/packages/chewie

chewie | Flutter Package

 

this is best video package...