Flutterで動画再生してみた

Daily Blogging64日目

Flutterでアニメーションを再生したかったのでvideo_playerを使ってみた

今回は事前に用意したmp4ファイルを再生するだけだったので、ライブラリを導入するだけですぐ再生できた

ライブラリの導入

flutter pub add video_player

実装

今回はこの4ステップで動画再生機能を実装

1. 動画を用意
2. VideoPlayerControllerを初期化
3. 動画用ウィジェット用意
4. 動画用ウィジェットの表示フラグの用意

動画を用意

• assets配下に動画を格納
• pubspec.yamlで動画のパスを記載

flutter:
  fonts:
    - family: Amatic
      fonts:
        - asset: assets/fonts/Amatic_SC/AmaticSC-Bold.ttf
  assets:
    - assets/videos/soul_transfer.MP4 // 今回はこの動画を再生する

サンプルコード

class _SoulDetailPageState extends State<SoulDetailPage> {
  late VideoPlayerController _videoController;
  bool _showSoulAnimation = false;

  @override
  void initState() {
    super.initState();

    // 2. 再生したい動画を指定してvideoControllerを初期化
    _videoController = VideoPlayerController.asset('assets/videos/soul_transfer.MP4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  // 処理が終了した後にメモリが適切に解放されるようにdispose 
  void dispose() {
    _videoController.dispose();
    super.dispose();
  }

  // 3. 動画ウィジェット
  Widget buildSoulAnimation() {
    return _showSoulAnimation
        ? Positioned.fill(
            child: VideoPlayer(_videoController),
          )
        : const SizedBox.shrink();
  }

  void _triggerSoulAnimation() {
  　// 4. 動画ウィジェットを表示するためのフラグをONにする
    setState(() {
      _showSoulAnimation = true;
    });

    // 動画を再生する
    _videoController.play();

    // 動画の再生時間が過ぎたらアニメーションを終了
    Timer(
      _videoController.value.duration,
      () => setState(() => _showSoulAnimation = false),
    );
  }

  ~~~
  appBar: AppBar(
        title: ~
        ~~~
        actions: [
          IconButton(
            onPressed: _triggerSoulAnimation,
            icon: const Icon(Icons.file_upload),
          ),
        ],
      ),

これでヘッダーにあるアイコンをタップした時に_triggerSoulAnimation()が呼び出され動画が再生されるようになる。