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

2019/11/04

WRITER

ロッキーカナイ

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

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

...

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