播放和暫停影片

1. 新增 video_player 相依性
2. 將權限新增至您的應用程式
3. 建立和初始化 VideoPlayerController
4. 顯示影片播放器
5. 播放和暫停影片
完整範例

在應用程式開發中，播放影片是很常見的任務，Flutter 應用程式也不例外。為了播放影片，Flutter 團隊提供了 video_player 外掛程式。您可以使用 video_player 外掛程式來播放儲存在檔案系統、資源或來自網際網路的影片。

在 iOS 上，video_player 外掛程式使用 AVPlayer 來處理播放。在 Android 上，它使用 ExoPlayer。

本食譜示範如何使用 video_player 套件，透過以下步驟從網際網路串流播放影片，並使用基本的播放和暫停控制：

加入 video_player 相依性。
為您的應用程式加入權限。
建立並初始化 VideoPlayerController。
顯示影片播放器。
播放和暫停影片。

本食譜依賴一個 Flutter 外掛程式：video_player。首先，將此相依性加入您的專案。

若要將 video_player 套件加入為相依性，請執行 flutter pub add

flutter pub add video_player

接下來，更新您的 android 和 ios 設定，以確保您的應用程式具有從網際網路串流影片的正確權限。

將以下權限加入 AndroidManifest.xml 檔案中，就在 <application> 定義之後。 AndroidManifest.xml 檔案位於 <專案根目錄>/android/app/src/main/AndroidManifest.xml。

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

    </application>

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

對於 iOS，將以下內容加入位於 <專案根目錄>/ios/Runner/Info.plist 的 Info.plist 檔案中。

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

如果您使用網路影片，請加入 com.apple.security.network.client 權限。

Flutter 網頁**不**支援 dart:io，因此請避免使用外掛程式的 VideoPlayerController.file 建構函式。使用此建構函式會嘗試建立一個會擲回 UnimplementedError 的 VideoPlayerController.file。

不同的網頁瀏覽器可能具有不同的影片播放功能，例如支援的格式或自動播放。請查看 video_player_web 套件，以取得更多針對網頁的資訊。

VideoPlayerOptions.mixWithOthers 選項無法在網頁中實作，至少目前是這樣。如果您在網頁中使用此選項，它會被靜默忽略。

現在您已安裝具有正確權限的 video_player 外掛程式，請建立一個 VideoPlayerController。 VideoPlayerController 類別可讓您連接到不同類型的影片並控制播放。

在播放影片之前，您還必須 initialize 控制器。這會建立與影片的連線，並準備控制器以進行播放。

若要建立並初始化 VideoPlayerController，請執行以下操作：

建立一個帶有伴隨 State 類別的 StatefulWidget
在 State 類別中新增一個變數來儲存 VideoPlayerController
在 State 類別中新增一個變數來儲存從 VideoPlayerController.initialize 返回的 Future
在 initState 方法中建立並初始化控制器
在 dispose 方法中處置控制器

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

現在，顯示影片。 video_player 外掛程式提供了 VideoPlayer 小工具來顯示由 VideoPlayerController 初始化的影片。依預設，VideoPlayer 小工具會佔用盡可能多的空間。這對於影片而言通常不是理想的，因為它們旨在以特定的長寬比顯示，例如 16x9 或 4x3。

因此，請將 VideoPlayer 小工具包裝在 AspectRatio 小工具中，以確保影片具有正確的比例。

此外，您必須在 _initializeVideoPlayerFuture() 完成後顯示 VideoPlayer 小工具。使用 FutureBuilder 顯示載入微調器，直到控制器完成初始化。注意：初始化控制器不會開始播放。

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

依預設，影片會以暫停狀態開始。若要開始播放，請呼叫 VideoPlayerController 提供的 play() 方法。若要暫停播放，請呼叫 pause() 方法。

對於此範例，請在您的應用程式中新增一個 FloatingActionButton，其根據情況顯示播放或暫停圖示。當使用者點擊按鈕時，如果影片目前已暫停，則播放影片；如果影片正在播放，則暫停影片。

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

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-06-26。檢視原始碼或回報問題。

播放和暫停影片

1. 加入 `video_player` 相依性

2. 將權限新增至您的應用程式

Android

iOS

macOS

Web

3. 建立並初始化 `VideoPlayerController`

4. 顯示影片播放器

5. 播放和暫停影片

完整範例