【Flutter】video_playerで動画再生

video_playerとは

video_playerは、Flutterアプリでビデオを再生するためのプラグインです。
iOS、Android、macOS、およびWebでのビデオ再生をサポートします。ビデオをウィジェットのサーフェス上で再生することができます。

video_player | Flutter package

Flutter plugin for displaying inline video with other Flutter widgets on Android, iOS, and web.

pub.dev

サポートされているプラットフォーム

プラットフォーム	サポートされるバージョン
Android	SDK 16+
iOS	12.0+
macOS	10.14+

インストール方法

1. 依存関係の追加

pubspec.yamlファイルに以下の依存関係を追加します：

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.8.6

2. iOSの設定

HTTP（httpsではなく）URLを使用してビデオにアクセスする必要がある場合、適切なNSAppTransportSecurity権限を<project root>/ios/Runner/Info.plistファイルに追加する必要があります。詳細はAppleのドキュメントを参照してください。

3. Androidの設定

ネットワークベースのビデオを使用する場合、<project root>/android/app/src/main/AndroidManifest.xmlに以下のパーミッションを追加します：

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

4. macOSの設定

ネットワークベースのビデオを使用する場合、com.apple.security.network.clientエンタイトルメントを追加する必要があります。

使用方法

簡単な例

以下は、ビデオを再生するための基本的なコード例です：

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

void main() => runApp(const VideoApp());

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

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

class _VideoAppState extends State<VideoApp> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.networkUrl(
      Uri.parse('https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
    )..initialize().then((_) {
      setState(() {});  // 初期化後、最初のフレームを表示
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

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

再生速度の設定

VideoPlayerControllerのsetPlaybackSpeedメソッドを使用して再生速度を設定できます。例えば、再生速度を2倍に設定するには：

_controller.setPlaybackSpeed(2.0);