[flutter] 비디오 재생하는 방법 - 외부 플러그인 사용, ViodeoPlayer

1. 사용 권한 주기 iOS

2. pub.dev 플러그인 다운로드

3. 갤러리에서 선택한 동영상 가져오기

4. 선택한 동영상 (컨트롤러)를 활용하여 제어하기

5. 비디오 컨트롤러 주요 함수

 

1. 사용 권한 주기 iOS - Android 권한 필요없음

// flutter 프로젝트 -> ios -> Runner -> Info.plist
<key>NSPhotoLibraryUsageDescription</key>
<string>사진첩 권한을 허용해 주세요</string>
<key>NSCameraUsageDescription</key>
<string>카메라 권한을 허용해 주세요</string>
<key>NSMicrophoneUsageDescription</key>
<string>마이크 권한을 허용해 주세요</string>

2. pub.dev 플러그인 다운로드

// flutter 프로젝트 -> pubspec.yaml
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  
  # 아래 추가!
  video_player: ^2.5.1
  image_picker: ^0.8.6+1

3. 갤러리에서 선택한 동영상 가져오기

// 이 함수가 불리우면 동영상 선택 화면이 뜬다.
// 선택한 video변수는 전역 변수로 보관한다.
onNewVideo() async {
    final video = await ImagePicker().pickVideo(
      source: ImageSource.gallery,
    );
    if (video != null) {
      setState(() {
        this.video = video;
      });
    }
  }

4. 선택한 동영상 (컨트롤러)를 활용하여 제어하기

// 선택한 video파일을 컨트롤러로 변경해 준다.
void initiailizeController() async {
	//현재 재생중인 비디오 위치 초기화
    currentPosition = Duration();
    
    this.videoPlayerController = VideoPlayerController.file(
      File(widget.video.path),
    );
    // 중요!
    await videoPlayerController!.initialize();
    
    //비디오의 재생 위치가 변경되면 해당 이벤트가 불리운다.
    videoPlayerController!.addListener(
      () async {
        final currentPosition = videoPlayerController!.value.position;
        setState(() {
          this.currentPosition = currentPosition;
        });
      },
    );
    //현재 페이지 갱신
    setState(() {});
  }

5. 비디오 컨트롤러 주요 함수

// 속성 Property
// 현재 재생중인 동영상의 비율
videoPlayerController!.value.aspectRatio

// 현재 동영상이 재생중인지 확인
videoPlayerController!.value.isPlaying

// 현재 재생중인 동영상의 위치
videoPlayerController!.value.position

// 현재 재생중인 동영상의 총길이
videoPlayerController!.value.duration

//함수 Func
// 재생중인 동영상 재생
videoPlayerController!.play();
// 재생중인 동영상 일시 정지
videoPlayerController!.pause();
// 재생중인 동영상위치 이동
videoPlayerController!.seekTo(Duration(seconds: val.toInt()));

//이벤트 Event
//재생위치가 변경될때 불리워지는 이벤트
videoPlayerController!.addListener(() async {
	},
);