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

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

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

1 video_playerの導入
2 動画ウィジェット MoviePlayerWidgetの作成
3 まとめ

video_playerの導入

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

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

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

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

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

MoviePlayerWidgetクラスでは、

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

上記を行ってます。

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();
  }
}

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);

1	_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",
          ),
        )
      ),
    );
  }

...