[Flutter] 영상관련 기능 정리

  void onReversePressed() {
  }
  void onPlayPressed() {
  }
  void onForwardPressed() {
  }

 

Play, reverse, forward 버튼 기능 구현

  void onReversePressed() {
//현재 영상 위치를 알아야한다(videoController!.value.position)
  final currentPosition = videoController!.value.position; // duration타입

  Duration position = Duration(); // position을 기본 0초로 세팅

  if(currentPosition.inSeconds > 3) {
    position = currentPosition - Duration(seconds: 3);
  }
  videoController!.seekTo(position); // seekTo도 duration
  }

  void onForwardPressed() {
    final maxPosition = videoController!.value.duration;
    final currentPosition = videoController!.value.position; // duration타입

    Duration position = maxPosition; // position을 기본 제일 끝으로 세팅

    if (((maxPosition - Duration(seconds: 3)).inSeconds) > currentPosition.inSeconds) {
      position = currentPosition + Duration(seconds: 3);
    }
    videoController!.seekTo(position); // seekTo도 duration
  }

  void onPlayPressed() {
// 이미 실행중이면 중지, 실행중이 아니면 실행
  setState(() {
    if (videoController!.value.isPlaying) {
      videoController!.pause();
    } else {
      videoController!.play();
    }
  });
  }

 

---

 

 

Slider

 

State에 변수 저장

Duration currentPosition = Duration();

 

Slider(
              value: currentPosition.inSeconds.toDouble(),
              onChanged: (double val) {
                setState(() {
                  currentPosition = Duration(seconds: val.toInt());
                });
              },
              max: videoController!.value.duration.inSeconds.toDouble(),
              min: 0,
            ),

 

 

하단에 Slider 표시

남은 분,초 표시

Positioned(
              bottom: 0,
              right: 0,
              left: 0,
              child: Row( 
                children: [
                  Text(
                    '${currentPosition.inMinutes}:${(currentPosition.inSeconds % 60).toString().padLeft(2,'0')}',
                    style: TextStyle(
                      color: Colors.white
                    ),
                  ),

 

 

Padleft  - 왼쪽에 글자로서 패딩을 넣겠다 , 1파라미터 몇개의 패딩을 할 거냐(최소 몇개를 보여줄거냐, 2파라미터 글자가 모자르면 무엇을 넣어줄거냐)

 

 

 

---

 

VideoController - Slider의 시간 일치시키기 => Listener 이용

 

videoController!.addListener((){})을 이용하자

videoController!.addListener(() {
      // 영상이 바뀔 때마다 함수 실행
        final currentPosition = videoController!.value.position;
        setState(() {
          this.currentPosition = currentPosition;
        });
    });

 

---

 

Slider는 움직일 때만 함수가 불리므로

Slider가 움직일 때 videoController도 움직이게 설정

 

 

		Expanded(
                      child: Slider(
                        value: currentPosition.inSeconds.toDouble(),
                        //print찍어보면 slider를 움질일 때만 찍힌다
                        onChanged: (double val) {
                          videoController!.seekTo(Duration(seconds: val.toInt(),
                          ),
                          );
                        },
                        max: videoController!.value.duration.inSeconds.toDouble(),
                        min: 0,
                      ),
                    ),

 

val에 들어오는 값은 slider의 현재 위치를 double로 바꾼 값