Flutter -Youtube Player(TimeStamp포함)

앱에 유튜브 동영상을 실행 시키는데, WebView까지는 필요 없이, 딱 동영상만 필요한 부분이 생겼다.

Youtube처럼 TimeStamp를 클릭 하면 해당 화면으로 이동하는 기능도 추가로 요청을 받았다.

 

YoutubePlayer에 주요한 부분

- youtubeId는 링크의 "watch?v="부분을 사용

 

TimeStamp를 실행 시키기 위해서 필요한 코드

youtubeController의 .seekTo 함수를 사용해주면 된다. 

GestureDetector(onTap: () {
                    youtubeController.seekTo(Duration(seconds: 8));
                  }, child: Text("8초 부터 시작")),

 

Controller 초기화

// https://www.youtube.com/watch?v=97v7vyk-2hY 
//youtubeId는 "v=" 뒤에 부분을 사용하면 된다.
String youtubeId = '97v7vyk-2hY';
  late YoutubePlayerController youtubePlayerController;
  @override
  void initState() {
    youtubePlayerController = YoutubePlayerController(
        initialVideoId: youtubeId,
        flags: const YoutubePlayerFlags(
          hideControls: true,
          mute: false, // 초기 플레이시 음소거
          controlsVisibleAtStart: false, // 비디오 시작시 컨트롤 표시
          autoPlay: false, // 자동 재생
          disableDragSeek: false, // 드래그로 비디오 시간 조정
          loop: false, // 반복재생
          isLive: false, // youtube Live UI
          forceHD: false, // 강제 HD
          enableCaption: false, // 자막
          showLiveFullscreenButton: false,
        ));

    super.initState();

 

View

  SizedBox(
  width:342,
  height: 192,
  	child : YoutubePlayer(
            controller: youtubePlayerController,
          ),
     )
  
 Row(
                children: [
                  Text("Contents 설명 ~"),
                  GestureDetector(onTap: () {
                    youtubeController.seekTo(Duration(seconds: 8));
                  }, child: Text("8초 부터 시작")),
                ],
              ),

 

실행 결과