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

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()하면 컨트롤 화면이 잘 나온다

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

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