こんにちは。スマホアプリをメインに開発しているロッキーカナイです。
今回はFlutterで動画をウィジェットとして扱う方法を紹介します。video_playerプラグインを使用することで簡単に実装可能です。
video_playerの導入
このvideo_playerはgoogle製なので品質やアップデート頻度も多く比較的安心して導入できるプラグインかと思います。
まず導入準備としては、iOSはInfo.plistにNSAppTransportSecurityの追加、AndroidはAndroidManifest.xmlにuses-permissionの追加を行います。
詳しくは、こちらを参照ください。
あとは、いつもどおり、pubspec.yamlに追加とflutter pub getで導入完了です。
動画ウィジェット MoviePlayerWidgetの作成
MoviePlayerWidgetクラスでは、
- 動画をURLから取得
- 取得中インジケータを表示する機能
- 動画の自動再生
上記を行ってます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
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の呼び出し前で、
1 |
_controller.setLooping(true); |
を追加することで可能です。
呼び出し
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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ボタンを表示して、再プレイ可能にする実装を紹介しようと思います。
ABOUT ME
