Flutter에서 Youtube 비디오 플레이하기.

Whatamelon!·2020년 11월 24일
0

https://pub.dev/packages/youtube_player_flutter

오늘은 요 라이브러리를 사용해서 Flutter 앱에서 유툽 동영상을 플레이해보겠습니다.


1. 우선 변수들을 등록해줍니다.

  YoutubePlayerController _controller;
  TextEditingController _idController;
  TextEditingController _seekToController;
  PlayerState _playerState;
  YoutubeMetaData _videoMetaData;
  double _volume = 100;
  bool _muted = false;
  bool _isPlayerReady = false;
  final _youtkey = UniqueKey();
  String _videoId = '';
  String _clickJump = '';

2. initState내부에 _controller 관련 설정을 해줍니다.

@override
 void initState() {
   super.initState();
   _controller = YoutubePlayerController(
     initialVideoId: _videoId,
     flags: const YoutubePlayerFlags(
       mute: false,
       autoPlay: true,
       disableDragSeek: true,
       loop: false,
       isLive: false,
       forceHD: false,
       enableCaption: true,
     ),
   )..addListener(listener);
   _idController = TextEditingController();
   _seekToController = TextEditingController();
   _videoMetaData = const YoutubeMetaData();
   _playerState = PlayerState.unknown;
}

3. Widget을 선언해줍니다.

	Container(
       		width: 360,
       		height:195,
       		child: YoutubePlayer(
                  width: 360,
                  aspectRatio : 16 / 9,
                    controller: _controller,
                  showVideoProgressIndicator: false,
                  progressIndicatorColor: Colors.redAccent,
                    progressColors: ProgressBarColors(
                        playedColor: Colors.transparent,
                        handleColor: Colors.transparent,
                      ),
                  onEnded: (data) {
                    _controller.pause();
                  },
                  topActions: <Widget>[
                    const SizedBox(width: 8.0),
                    Expanded(
                      child: Text(
                        _controller.metadata.title,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                        ),
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                    ),
                  ],
                  bottomActions: <Widget>[
                    const SizedBox(width: 14.0),
                    CurrentPosition(),
                    const SizedBox(width: 8.0),
                    ProgressBar(isExpanded: true,
                      colors: ProgressBarColors(
                        playedColor: Colors.red,
                        handleColor: Colors.red,
                        backgroundColor: Colors.white,
                        bufferedColor: Colors.grey
                      ),),
                    RemainingDuration(),
                  ],
                )
              ),

4. 특정 위치로 타임점프 하고 싶다면?

InkWell or GestureDetector, button의 onTap or onPressed 함수에 

_controller.seekTo(Duration(seconds: int.parse(_qsubList[index].info)));
seekTo 함수를 사용하시면 특정위치로 이동할 수 있습니다!

5. 뒷정리!


  @override
  void dispose() {
    _controller.dispose();
    _idController.dispose();
    _seekToController.dispose();
    super.dispose();
  }
  
  + 
  
  WillpopScope로 나가기 전에 _controller.pause(); 
  를 해주시면 iOS에서 페이지를 나가고도 동영상이 재생되는 것을 막을 수 있습니다!

👋 👋 👋

profile
플러터도 하구 자바스크립트두 하구 이것저것 해요 :D

2개의 댓글

comment-user-thumbnail
2021년 1월 21일

안녕하세요. 지금 youtube play 를 써볼려고 하는데 full screen 할때 화면이 절반으로만 보이고 꽉차게 안되는데 이걸 어떻게 해결하면 좋을까요/.??

1개의 답글