CS/Flutter | Dart

비디오 플레이어 앱 #3(Slider, 새로운 동영상 불러와 재생)

damzzi 2023. 8. 2. 21:56

Slider 위젯 사용해 동영상의 현재 재생 위치와 연동 시키기

1. slider 위젯을 사용자가 스크롤하면 동영상이 해당 위치로 이동해야 한다

2. 동영상이 실행되는 위치에 따라 자동으로 slider가 움직여야 한다

 

 

 

custom_video_player.dart

 

 

 

Slider

"${crntPosition.inMinutes}: ${(crntPosition.inSeconds % 60).toString().padLeft(2, "0")}",
// 60으로 나눈 나머지 코딩을 하지 않으면 61초 됐을 때 분은 1분이 올라가는데 초는 여전히 61일 것
// -> 분 이 된 부분은 분으로 넘기고 초만 남겨줘야하기 때문

0:01 이 부분!

 

 

 

Expanded(
  child: Slider(
      value: crntPosition.inSeconds.toDouble(),
      max: maxPosition.inSeconds.toDouble(),
      min: 0,
      // 직접 슬라이드를 움직일 때만 아래 onChanged()가 불림
      onChanged: onSliderChanged),
),

Slider 위젯의 min값은 항상 0이다

-> 동영상 시작이 항상 0초이기 때문이다

 

max값은 선택된 동영상의 재생 길이를 초단위로 반환하면 된다

videoController 변수의 value.duration 게터 불러와 Duration 클래스로 전체 영상 길이를 받아온 후

inSeconds 게터 이용해 전체 길이를 초로 반환한 값을 받을 수 있다

 

max 매개변수는 int가 아닌 double 값을 입력해야 한다

int 값으로 변환되는 inSeconds 게터에 toDouble()함수를 실행해서 double 형태로 형변환해준다

 

 

 

 

custom_video_player.dart

onSliderChanged

슬라이드를 직접 이동할 때 동영상 시간과 맞춰줄 수 있도록 설정한다

 

동영상이 현재 재생되고 있는 위치를 가져올 수 있는 Value.position과 동영상의 재생 위치를 변경할 수 있는 seekTo() 사용한다

 

seekTo()

동영상의 재생 위치를 특정 위치로 이동해준다

매개변수에 Duration 값 입력해야 한다

onChanged()에 제공되는 val 값을 int로 변경해 Slider 위젯에서 입력된 재생 위치를 받을 수 있다

 

 

 

 

custom_video_player.dart

if (oldWidget.video.path != widget.video.path) {
  initializeController();
}

전에 들어온 비디오와 새로 들어온 비디오의 경로가 다를 때 컨트롤러를 초기화해준다

 

 

 

custom_video_player.dart

 

 

 

home_screen.dart

 

 

 

처음 선택한 영상이 잘 재생된다

onTap()하면 컨트롤 화면이 잘 나온다

컨트롤 화면에서 카메라 아이콘을 눌러 갤러리에 접근해 새로운 영상을 선택해 올 수 있다

새로 선택한 영상도 이전 영상과 싱크 에러없이 잘 재생된다