dev/flutter

[Flutter] video_player 동영상 플레이어

캄춰 2024. 1. 13. 23:24
728x90
반응형

라이브러리

비디오 플레이어

링크 : https://pub.dev/packages/video_player

파일 접근

링크 :https://pub.dev/packages/image_picker

XFile 이 필요하다.

이 XFile안에 Device의 파일, 동영상 정보를 저장할 수 있기 때문이다.

 

XFile에 파일, 동영상 정보를 저장하기 위해선,

파일, 동영상 정보에 접근할 수 있어야 한다.

 

해당 라이브러리는 image_picker.dart 라는 라이브러리이다.

영상 파일만 접근하여 가져오기

    final xFile = await ImagePicker().pickVideo(
      source: ImageSource.gallery,
    );

 

 

비디오 플레이어 뷰 설정

  VideoPlayerController? videoPlayerController;
    VideoPlayer(
      videoPlayerController!
    ),

 

 

비디오 플레이어에 영상 파일 넣기 (위의 xFile인스턴스)

    final videoController = VideoPlayerController.file(
      File(widget.xFile.path)
    );
    
    
   await videoController.initialize();
   
   setState(() {
      videoPlayerController = videoController;
    });

 

 

영상 진행도, Seekbar, : Slider

      child: Slider(
        onChanged: (double value) {
          videoPlayerController!.seekTo(
            Duration(seconds: value.toInt())
          );
        },
        value: videoPlayerController!.value.position.inSeconds.toDouble(),
        min: 0,
        max: videoPlayerController!.value.duration.inSeconds.toDouble(),
      ),

 

 

동영상의 현재 위치(시간:진행도)

videoPlayerController!.value.position,

 

 

동영상의 총 길이(시간:진행도)

videoPlayerController!.value.duration,

 

 

시간 표현

'${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}',

 

 

비디오 재생/일시정지

    if (videoPlayerController!.value.isPlaying) {
      videoPlayerController!.pause();
    } else {
      videoPlayerController!.play();
    }
728x90
반응형

'dev > flutter' 카테고리의 다른 글

[Flutter] A package may not list itself as a dependency  (0) 2024.01.13
[Flutter] 페이지뷰 PageView  (0) 2024.01.07
[Flutter] 상태바 StatusBar  (0) 2024.01.07
[Flutter] 라이브러리 Library추가  (0) 2024.01.03
[Flutter] Firebase 연결  (0) 2024.01.02