広告

Flutterラボの

プレミアム会員になる

2021.01.12

Flutter WEBでYouTubeの動画を再生できるようにしたので、その方法を紹介したいと思います。

今回は、『youtube_player_iframe』というパッケージを使用しました。

youtube_player_iframe | Flutter Package Flutter port of the official YouTube iFrame player API. Suppo pub.dev

パッケージをインストール

pubspec.yamlファイルに追記する

dependencies:
 youtube_player_iframe: ^1.2.0+2

flutter pub get でインストールしておきます。

コントローラーを作成

YoutubePlayerController _controller = YoutubePlayerController(
 initialVideoId: '{動画のID}'
 params: YoutubePlayerParams(
   startAt: Duration(seconds: 0),
   showControls: true,
   showFullscreenButton: true,
 ),
);

再生画面ウィジェトを作成

YoutubePlayerControllerProvider(
 controller: _controller,
 child: YoutubePlayerIFrame(
   aspectRatio: 16 / 9,
 ),
),

これで、動画を再生することができます。

ハッチアウトスクール ハッチアウトスクールの公式サイトです hatchout.net


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)