影片的播放和暫停

步驟
1. 新增 video_player 依賴
2. 新增許可權
- Android 設定
- iOS 設定
3. 建立並初始化 VideoPlayerController
4. 展示影片播放器
5. 播放影片和暫停影片
完整範例

在任何應用開發中，影片播放都是一項常見任務，Flutter 應用也不例外。為了支援影片播放，Flutter 團隊提供了 video_player 外掛。你可以使用 video_player 外掛播放儲存在本地檔案系統中的影片或者網路影片。

在 iOS 上，video_player 使用 AVPlayer 進行播放控制。在 Android 上，使用的是 ExoPlayer。

這個章節講解的是如何藉助 video_player 套件接收網路視頻流，並加入基本的播放、暫停操作。

步驟

新增 video_player 依賴
新增許可權
建立並初始化 VideoPlayerController
展示影片播放器
播放影片和暫停影片

1. 新增 `video_player` 依賴

這個章節基於一個 Flutter 外掛： video_player。首先，新增依賴到 pubspec.yaml 中。

執行 flutter pub add 將 video_player 新增為依賴：

$ flutter pub add video_player

2. 新增許可權

然後，你需要確保你的應用擁有從網路中獲取視頻流的許可權。因此，你需要更新你的 android 和 ios 設定。

Android 設定

在 AndroidManifest.xml 檔案中的 <application> 設定項下加入如下許可權。 AndroidManifest.xml 檔案的路徑是 <project root>/android/app/src/main/AndroidManifest.xml

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

    </application>

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

iOS 設定

針對 iOS，你需要在 <project root>/ios/Runner/Info.plist 路徑下的 Info.plist 檔案中加入如下設定。

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

3. 建立並初始化 `VideoPlayerController`

video_player 外掛成功安裝且許可權設定完成後，需要建立一個 VideoPlayerController。 VideoPlayerController 類允許你播放不同型別的影片並進行播放控制。

在播放影片前，需要對播放控制器進行初始化。初始化過程主要是與影片源建立連線和播放控制的準備。

建立和初始化 VideoPlayerController 時，請遵循以下步驟：

建立一個 StatefulWidget 元件和 State 類
在 State 類別中增加一個變數來存放 VideoPlayerController
在 State 類別中增加另外一個變數來存放 VideoPlayerController.initialize 回傳的 Future
在 initState 方法裡建立和初始化控制器
在 dispose 方法裡銷燬控制器

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

    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.networkUrl(
      Uri.parse(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
      ),
    );

    _initializeVideoPlayerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Complete the code in the next step.
    return Container();
  }
}

4. 展示影片播放器

現在到了展示播放器的時候。video_player 外掛提供了 VideoPlayer 元件來展示已經被 VideoPlayerController 初始化完成的影片。預設情況下，VideoPlayer 元件會盡可能撐滿整個空間。但是這通常不會太理想，因為很多時候影片需要在特定的寬高比下展示，比如 16x9 或者 4x3。

因此，你可以把 VideoPlayer 元件嵌進一個 AspectRatio 元件中，保證影片播放保持正確的比例。

此外，你必須在 _initializeVideoPlayerFuture 完成後才展示 VideoPlayer 元件。你可以使用 FutureBuilder 來展示一個旋轉的載入圖示直到初始化完成。請注意：控制器初始化完成並不會立即開始播放。

// Use a FutureBuilder to display a loading spinner while waiting for the
// VideoPlayerController to finish initializing.
FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // If the VideoPlayerController has finished initialization, use
      // the data it provides to limit the aspect ratio of the video.
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        // Use the VideoPlayer widget to display the video.
        child: VideoPlayer(_controller),
      );
    } else {
      // If the VideoPlayerController is still initializing, show a
      // loading spinner.
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
  },
)

5. 播放影片和暫停影片

預設情況下，播放器啟動時會處於暫停狀態。開始播放，需要呼叫 VideoPlayerController 提供的play() 方法。停止播放，需要呼叫 pause() 方法。

在這個範例中，嚮應用加入了一個 FloatingActionButton，這個按鈕會根據播放狀態展示播放或者暫停的圖示。當用戶點選按鈕，會切換播放狀態。如果當前是暫停狀態，就開始播放。如果當前是播放狀態，就暫停播放。

FloatingActionButton(
  onPressed: () {
    // Wrap the play or pause in a call to `setState`. This ensures the
    // correct icon is shown.
    setState(() {
      // If the video is playing, pause it.
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        // If the video is paused, play it.
        _controller.play();
      }
    });
  },
  // Display the correct icon depending on the state of the player.
  child: Icon(
    _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
)

完整範例

import 'dart:async';

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

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

class VideoPlayerApp extends StatelessWidget {
  const VideoPlayerApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Video Player Demo',
      home: VideoPlayerScreen(),
    );
  }
}

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

    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.networkUrl(
      Uri.parse(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
      ),
    );

    // Initialize the controller and store the Future for later use.
    _initializeVideoPlayerFuture = _controller.initialize();

    // Use the controller to loop the video.
    _controller.setLooping(true);
  }

  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Butterfly Video'),
      ),
      // Use a FutureBuilder to display a loading spinner while waiting for the
      // VideoPlayerController to finish initializing.
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the VideoPlayerController has finished initialization, use
            // the data it provides to limit the aspect ratio of the video.
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              // Use the VideoPlayer widget to display the video.
              child: VideoPlayer(_controller),
            );
          } else {
            // If the VideoPlayerController is still initializing, show a
            // loading spinner.
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Wrap the play or pause in a call to `setState`. This ensures the
          // correct icon is shown.
          setState(() {
            // If the video is playing, pause it.
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              // If the video is paused, play it.
              _controller.play();
            }
          });
        },
        // Display the correct icon depending on the state of the player.
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}