FlutterでYouTube動画をアプリ内再生できるyoutube_player_flutter

動画コンテンツを扱うFlutterアプリでは、

  • YouTube動画をアプリ内で再生したい
  • 学習動画を埋め込みたい
  • 商品紹介動画を表示したい
  • ライブ配信を視聴できるようにしたい

といったケースがあります。

もちろん外部ブラウザやYouTubeアプリを開くこともできますが、アプリ内でシームレスに再生できた方がユーザー体験は向上します。

そんな時に便利なのが youtube_player_flutter です。

この記事では、FlutterでYouTube動画を簡単に埋め込める「youtube_player_flutter」の使い方や特徴を解説します。

youtube_player_flutterとは？

youtube_player_flutterは、YouTube公式のIFrame Player API を利用して、Flutterアプリ内でYouTube動画を再生できるパッケージです。

最新版（10.x）では内部実装が大きく刷新され、youtube_player_iframe をベースにした新しいアーキテクチャへ移行しました。これにより、Android・iOSだけでなく、macOSやWebにも対応しています。

主な特徴は以下の通りです。

  • YouTube動画の埋め込み再生
  • ライブ配信対応
  • フルスクリーン再生
  • 再生速度変更
  • シークバー標準搭載
  • カスタマイズ可能なコントロールUI
  • YouTube APIキー不要

インストール

まずは pubspec.yaml に追加します。

dependencies:
  youtube_player_flutter: ^10.0.1

続いて、

flutter pub get

を実行します。

基本的な使い方

まずはコントローラーを作成します。

final controller = YoutubePlayerController(
  initialVideoId: 'BBAyRBTfsOU',
  flags: const YoutubePlayerFlags(
    autoPlay: false,
    mute: false,
  ),
);

続いてプレイヤーを配置します。

YoutubePlayer(
  controller: controller,
  showVideoProgressIndicator: true,
)

これだけでYouTube動画をアプリ内で再生できます。

YouTube URLから動画IDを取得する

YouTube動画のURLしか持っていない場合は、ヘルパーメソッドを利用できます。

final videoId =
    YoutubePlayer.convertUrlToId(
      'https://www.youtube.com/watch?v=BBAyRBTfsOU',
    );

取得した videoId をそのまま initialVideoId に指定できます。

フルスクリーン対応

最新版ではフルスクリーン機能がプレイヤーへ統合されています。

YoutubePlayer(
  controller: controller,
)

画面右下のボタンから全画面表示へ切り替えられます。

以前のバージョンで利用していた

YoutubePlayerBuilder

は不要になりました。

ライブ配信を再生する

ライブ配信も簡単に再生できます。

final controller =
    YoutubePlayerController(
      initialVideoId: 'ライブ動画ID',
      flags: const YoutubePlayerFlags(
        isLive: true,
      ),
    );

ライブ配信では、

  • 赤色のLIVEインジケーター
  • シークバー非表示

などライブ向けUIへ自動で切り替わります。

自動再生

動画読み込み後に自動再生する場合は、

YoutubePlayerFlags(
  autoPlay: true,
)

を指定します。

逆に通常は

autoPlay: false

がおすすめです。

ミュート再生

最初から音声をOFFにしたい場合は、

YoutubePlayerFlags(
  mute: true,
)

を指定します。

広告動画や紹介動画などでよく利用されます。

コントロールUIをカスタマイズ

標準UIも十分使いやすいですが、自分好みに変更することも可能です。

例えば、

YoutubePlayer(
  controller: controller,
  bottomActions: [
    CurrentPosition(),
    ProgressBar(
      isExpanded: true,
    ),
    RemainingDuration(),
    FullScreenButton(),
  ],
)

のように必要なコントロールだけを表示できます。

利用できる代表的なウィジェットは以下です。

Widget内容
PlayPauseButton再生・停止
ProgressBarシークバー
CurrentPosition現在位置
RemainingDuration残り時間
PlaybackSpeedButton再生速度
FullScreenButton全画面切替

再生終了を検知する

コントローラーを監視することで、動画状態を取得できます。

controller.addListener(() {

  final state = controller.value;

  if (state.playerState ==
      PlayerState.ended) {

    print('動画終了');

  }

});

動画終了後に次の動画を再生したい場合などに便利です。

コントローラーは必ず破棄する

画面を閉じる際は忘れずにDisposeします。

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

リソースリーク防止のため必須です。

主な活用シーン

学習アプリ

教材動画を埋め込めます。

ECアプリ

商品紹介動画を表示できます。

ニュースアプリ

公式YouTube動画をそのまま掲載できます。

ライブ配信アプリ

YouTube Liveをアプリ内で視聴できます。

イベントアプリ

講演動画やアーカイブ配信にも利用できます。

メリット

APIキー不要

YouTube公式IFrame Player APIを利用するため、基本的な動画再生にYouTube Data APIキーは必要ありません。

クロスプラットフォーム対応

Android・iOS・macOS・Webに対応しています。

UIが充実

再生バーやフルスクリーン、再生速度変更などが標準搭載されています。

実装が簡単

数行のコードだけでYouTubeプレイヤーを組み込めます。

注意点

YouTube利用規約を遵守する

このパッケージはYouTube公式IFrame Player APIを利用しています。

そのため、YouTubeの利用規約に従って使用する必要があります。動画のダウンロードや広告の除去など、規約に反する使い方はできません。

オフライン再生はできない

YouTube動画はストリーミング再生のみ対応です。

完全オリジナルUIを作りたい場合

より細かく制御したい場合は、ベースライブラリである

youtube_player_iframe

を利用する方法もあります。youtube_player_flutterは、その上に使いやすいUIやコントロールを追加したラッパーライブラリです。

まとめ

youtube_player_flutterは、FlutterでYouTube動画を手軽に埋め込める定番パッケージです。

最新版では内部実装が刷新され、Android・iOSに加えてmacOSやWebにも対応し、さらに使いやすくなりました。

特に、

  • 学習アプリ
  • ニュースアプリ
  • ECアプリ
  • 動画コンテンツアプリ
  • ライブ配信アプリ

などでは非常に活躍するパッケージです。

YouTube動画をFlutterアプリへ簡単に組み込みたい場合は、まず検討したいライブラリと言えるでしょう。

タイトルとURLをコピーしました