今天要來分享的功能是影片播放功能
為了影片播放的目的，Flutter 提供了 video_player 來完成
而 video_player 提供透過檔案系統、Asset或是網路來當作播放影片的來源
那讓我們來看看如何達成相關的功能吧

iOS 的部分底層是透過 AVPlayer來實作並完成
Android 的部分則是透過 ExoPlayer

而要完成這些功能的步驟為底下這些步驟
1. 新增 video_player 套件
2. 對應用程式權限
3. 創建及初始化 VideoPlayerController
4. 顯示影片播放器
5. 播放及暫停影片

Step 1.

執行

flutter pub add video_player

Step 2.

新增平台的相關設定

Android

在 <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

在<project root>/ios/Runner/Info.plist. 加上底下資訊

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

Warning: The video_player plugin doesn’t work on iOS simulators. You must test videos on real iOS devices.

Step 3

創建 VideoPlayerController

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.network(
      '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();
  }
}

Step 4

預設上會是根據空間大小呈現至對應的大小
因此在實作上建議透過 AspectRatio 來將 VideoPlayer 給框住以便呈現對應的畫面比例

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

Step 5

播放並暫停影片
在預設上影片會是用暫停狀態來作為起始點
而要開始播放的話，則可以呼叫 VideoPlayer 中的 play() 函式
暫停則是 pause()

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,
  ),
)

參考資料

強而有力的官網後盾