動画の再生・一時停止をflutterで行うためのTips

1.video_playerのDependencyを追加する。
2.アプリにパーミッション（許可）を追加する。
3.VideoPlayerControllerを作成し、初期設定します。
4.動画再生プレイヤーを表示する。
5.動画を再生・一時停止する。

1.video_playerのDependencyを追加する。

dependencies:
  flutter:
    sdk: flutter
  video_player:

2.アプリにパーミッション（許可）を追加する。

Android

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application ...>

    </application>

    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

iOS

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

3.VideoPlayerControllerを作成し、初期設定する

VideoPlayerControllerを作り、初期化する方法は以下のようになります。

1.StatefulWidgetを作成して、State Classを設定します。
2.State classに変数を追加し、VideoPlayerControllerを記憶させます。
3.VideoPlayerController.initializeから返されたFutureを保持するために、State classに変数を追加します。
4.initState methodでController作成し、初期化します。
5.dispose methodでControllerを削除します。

class VideoPlayerScreen extends StatefulWidget {
  const VideoPlayerScreen({super.key});

  @override
  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
 
    _controller = VideoPlayerController.network(
      '動画.mp4',
    );

    _initializeVideoPlayerFuture = _controller.initialize();
  }

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

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

4.動画再生プレイヤーを表示する。

_initializeVideoPlayerFuture() が完了した後にWidgetを表示します。Controllerの初期化が終了するまで、FutureBuilder を使用してローディングスピナーを表示します。

FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      );
    } else {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
  },
)

5.動画を再生・一時停止する

初期状態では、動画は一時停止状態で開始されます。再生を開始するには、VideoPlayerControllerが持っているplay() という関数を呼び出します。一時停止したい場合は、pauseを呼び出します。

FloatingActionButton(
  onPressed: () {
    setState(() {
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        _controller.play();
      }
    });
  },
  child: Icon(
    _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
)

参考 : Flutter.dev

金曜担当 – Ami