【Flutter】YouTubeの動画をアプリ内でストリーミング再生する方法

1. はじめに

YouTubeは直接的な動画URLのストリーミングを制限しており、YouTubeの動画をアプリ内で再生するためには、YouTubeの公式APIや埋め込み機能を利用する必要があります。YouTubeの動画をFlutterアプリで再生する方法として、youtube_player_flutter というパッケージを使うのが一般的です。このパッケージは、YouTube動画を簡単に埋め込み、再生できるウィジェットを提供しています。本記事では、youtube_player_flutterを使ってYouTube動画をストリーミング再生する方法を解説します。

---

2. 動作環境

• M1 MacBook Pro
• VS Code

---

3. パッケージのインストール

まず、Flutterプロジェクトにyoutube_player_flutterパッケージを追加します。
以下のコマンドでパッケージをインストールします。

flutter pub add youtube_player_flutter

---

4. 実装

4.1 YouTube動画を埋め込む

以下のコードでは、YouTube動画のURL（動画ID）を指定して、アプリ内で再生する方法を紹介します。

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  const VideoPlayerScreen({super.key});

  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    // YouTubeの動画IDを指定してコントローラーを初期化
    _controller = YoutubePlayerController(
      initialVideoId: '0mwxiFOi1GQ',  // ここにYouTube動画のIDを指定
      flags: const YoutubePlayerFlags(
        autoPlay: true,    // 自動再生を有効にする
        mute: false,       // 音声を有効にする
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();  // YouTubeプレイヤーを破棄
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('YouTube Video Player'),
      ),
      body: Center(
        // YouTubeの動画を表示
        child: YoutubePlayer(
          controller: _controller,
          // 動画の進捗バーを表示
          showVideoProgressIndicator: true,
        ),
      ),
    );
  }
}

4.2 コードの解説

• YoutubePlayerController: YouTube動画を管理するためのコントローラーです。initialVideoIdには、YouTube動画のID（URLのv=の後ろの部分）を指定します。
  • 例: https://www.youtube.com/watch?v=0mwxiFOi1GQ の場合、0mwxiFOi1GQが動画IDになります。
• YoutubePlayer: YouTube動画を表示するウィジェットです。controllerには、先ほど作成したYoutubePlayerControllerを指定します。

4.3 動画IDの取得

YouTube動画のIDは、YouTubeのURLから取得できます。

例えば、以下のURLの場合：

https://www.youtube.com/watch?v=0mwxiFOi1GQ

0mwxiFOi1GQの部分が動画IDです。

---

5. おわりに

FlutterでYouTubeの動画をアプリに埋め込んで再生するには、youtube_player_flutterパッケージを使用するのが最も簡単で効率的な方法です。このパッケージを使うことで、YouTube動画のストリーミング再生、再生・停止・音量調整などの基本的な機能が簡単に実現できます。

この実装をベースにして、複数の動画を再生したり、動画の再生制御を追加したりすることもできます。youtube_player_flutterは非常に多機能で、動画のカスタマイズやインタラクションもサポートしているので、公式ドキュメントを参照しながら、自分のアプリに必要な機能を追加してみてください。

• youtube_player_flutterの公式ドキュメント