Zenn
🕌

Flutterでビデオプレイヤーを実装する方法

2024/06/03に公開
Flutter
tech

この記事では、Flutterでビデオプレイヤーを実装する方法を紹介します。以下のサンプルコードを使用して、動画を再生するシンプルなビデオプレイヤーを作成します。

必要なパッケージを追加

まず、video_playerパッケージを追加します。pubspec.yamlファイルに以下の行を追加してください。

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.2.6

次に、以下のコマンドを実行してパッケージをインストールします。

flutter pub get

コードの実装

次に、ビデオプレイヤーを実装するためのコードを作成します。

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

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

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

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

class _VideoAppState extends State<VideoApp> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.networkUrl(Uri.parse(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'))
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

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

コードの説明

  1. パッケージのインポート: video_playerパッケージをインポートします。
  2. VideoAppクラス: StatefulWidgetを継承して、ビデオプレイヤーの状態を管理します。
  3. _VideoAppStateクラス:
    • VideoPlayerControllerを使用してビデオを管理します。
    • initStateメソッドでビデオコントローラーを初期化し、ネットワークからビデオをロードします。
    • ビデオが初期化されたら、setStateを呼び出してUIを更新します。
  4. buildメソッド:
    • MaterialAppを使用してアプリケーションを作成します。
    • Scaffold内にVideoPlayerウィジェットを配置します。
    • ビデオの再生・一時停止を制御するためのFloatingActionButtonを追加します。
  5. disposeメソッド: ビデオコントローラーを破棄してリソースを解放します。

動作確認

コードを実行して、ビデオプレイヤーが正しく動作することを確認します。再生ボタンを押すとビデオが再生され、停止ボタンを押すと一時停止します。

以上が、Flutterでビデオプレイヤーを実装する方法です。このサンプルコードを基に、独自のビデオ再生アプリケーションを作成してみてください。

Discussion