技術

【Flutter】Flutterで動画ウィジェット(video_player)を使用する

WRITER

ロッキーカナイ

SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。

こんにちは。スマホアプリをメインに開発しているロッキーカナイです。

今回はFlutterで動画をウィジェットとして扱う方法を紹介します。video_playerプラグインを使用することで簡単に実装可能です。

video_playerの導入

このvideo_playerはgoogle製なので品質やアップデート頻度も多く比較的安心して導入できるプラグインかと思います。

まず導入準備としては、iOSはInfo.plistにNSAppTransportSecurityの追加、AndroidはAndroidManifest.xmlにuses-permissionの追加を行います。

詳しくは、こちらを参照ください。

あとは、いつもどおり、pubspec.yamlに追加とflutter pub getで導入完了です。

動画ウィジェット MoviePlayerWidgetの作成

MoviePlayerWidgetクラスでは、

  1. 動画をURLから取得
  2. 取得中インジケータを表示する機能
  3. 動画の自動再生

上記を行ってます。

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

/*
 * 動画ウィジェット
 */
class MoviePlayerWidget extends StatefulWidget {

  String movieURL; // 動画URL
  MoviePlayerWidget(this.movieURL) : super();

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


/*
 * ステート
 */

class _MoviePlayerWidgetState extends State<MoviePlayerWidget> {

  // コントローラー
  VideoPlayerController _controller;

  @override
  void initState() {

    // 動画プレーヤーの初期化
    _controller = VideoPlayerController.network(
        widget.movieURL
    )..initialize().then((_) {

      setState(() {});
      _controller.play();
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    if (_controller == null) return Container();

    if (_controller.value.initialized) {

      /*
       * 動画
       */
      return Container(
        child: AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        ),
      );
    } else {

      /*
       * インジケータを表示
       */
      return Container(
        height: 150.0,
        child: Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
          ),
        ),
      );
    }
  }

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

ちなみに動画をループ再生する場合は、initStateメソッド内のsuperの呼び出し前で、

_controller.setLooping(true);

を追加することで可能です。

呼び出し

import 'package:test_project/MoviePlayerWidget.dart';

...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          child: MoviePlayerWidget(
            "http://egaoinc.xsrv.jp/egao-blog/movie/sample-movie.mp4",
          ),
        )
      ),
    );
  }

...

これを実行すると以下のような感じになります。（動画でなく申し訳ない）

こんな感じで使用することができます。

まとめ

このように超簡単に動画ウィジェットを表示することができます。

次回は、今回の続編ということで、MoviePlayerWidgetをコード修正して、webなんかでよくある再生終了したらplayボタンを表示して、再プレイ可能にする実装を紹介しようと思います。