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에서 페이지를 나가고도 동영상이 재생되는 것을 막을 수 있습니다!
👋 👋 👋
안녕하세요. 지금 youtube play 를 써볼려고 하는데 full screen 할때 화면이 절반으로만 보이고 꽉차게 안되는데 이걸 어떻게 해결하면 좋을까요/.??