詳解Flutter中視頻播放器插件的使用教程

更新時間：2022年02月28日 15:30:44 作者：迪魯賓

視頻播放器插件是可用于Flutter的常用插件之一，在這篇文章中，將學習如何應用視頻播放器插件以及控制視頻播放器的不同功能，感興趣的可以了解一下

創(chuàng)建一個新的視頻播放器

在使用視頻播放器插件之前，你應該把它添加到你的pubspec.yaml 文件中。當你打開pubspec.yaml 文件時，你可以看到運行你的應用程序所需的一些配置和依賴性。我們的視頻播放器插件應該被添加到dependencies 塊下。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  video_player: 2.1.15  //video player

該插件的當前版本是2.1.15 ，但你可以通過查看插件頁面在這里添加最新版本。如果你保存文件時是在VS Code中，它會自動下載該插件。如果不是，打開終端，寫flutter pub get 來下載該插件。

進入你想添加該插件的文件，并導入video_player.dart 文件。

import 'package:video_player/video_player.dart';

現(xiàn)在你可以在你的項目中使用視頻播放器插件了。

有幾種方法來加載視頻。讓我們從資產中加載我們的例子。在項目的根層創(chuàng)建一個assets/video文件夾，在該文件夾內添加一個視頻。然后在pubspec.yaml ，在assets 部分，指定文件路徑，如下所示。

assets:
    - assets/video/video.mp4

讓我們創(chuàng)建一個單獨的有狀態(tài)的部件，稱為VideoPlayerWidget ，以插入我們的視頻播放器相關的實現(xiàn)。

你可以在initState 方法中初始化視頻播放器，如下所示。另外，別忘了dispose ，讓視頻播放器做清理工作。

class _VideoPlayerState extends State<VideoPlayerWidget> {
  late VideoPlayerController _videoPlayerController;
  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.asset(
        'assets/video/video.mp4')
      ..initialize().then((_) {
        setState(() {});
        _videoPlayerController.play();
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: VideoPlayer(_videoPlayerController),
    );
  }
}

VideoPlayerController 必須用late 關鍵字來指定，因為我們在這一行中仍然沒有定義視頻播放器控制器，我們將在后面做這個。在initState 里面，videoPlayerController 已經和資產的路徑一起被初始化。

當初始化完成后，它改變了狀態(tài)并重建了小部件。你可以在初始化后開始播放視頻。

取代assets ，你可以使用視頻的URL。為了訪問網絡，你應該給Android和iOS添加互聯(lián)網權限配置。

從根目錄下，進入ios/Runner ，打開info.plist 文件。然后，在該文件中添加以下配置。

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

接下來，去android/app/src/main ，并打開AndroidManifest.xml 。然后，向其添加以下代碼。

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

現(xiàn)在你可以把asset 改為network ，并在那里添加視頻URL。

  @override
  void initState() {
    super.initState();
    _videoPlayerController =
        VideoPlayerController.network('video_url_here')
          ..initialize().then((_) {
            setState(() {});
            _videoPlayerController.play();
          });
  }

即使初始化已經完成，也應該有辦法在用戶界面中顯示播放器。VideoPlayer widget可以用來做到這一點。為了使它工作，你應該把控制器作為第一個參數傳遞給VideoPlayer widget。

在顯示VideoPlayer widget之前，最好先檢查初始化是否成功。

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _videoPlayerController.value.isInitialized ? VideoPlayer(_videoPlayerController) : Container(),
    );
  }

現(xiàn)在你可以看到屏幕上的視頻了。但是有一個小問題：它的長寬比不合適。這可以通過使用AspectRatio widget來解決。視頻播放器提供了一個適當的視頻長寬比，你可以使用這個值來設置為AspectRatio widget。

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _videoPlayerController.value.isInitialized ? AspectRatio(aspectRatio: 
      _videoPlayerController.value.aspectRatio,
      child: VideoPlayer(_videoPlayerController)
      ) : Container(),
    );
  }

現(xiàn)在你可以看到具有適當長寬比的視頻。

添加播放和暫停按鈕

首先，讓我們把視頻播放器小部件包在一個列小部件里面，因為我們應該把播放和暫停按鈕放在播放器下面。在播放器小組件之后的列內，讓我們在一個Row 小組件內添加兩個ElevatedButton 小組件，在這些按鈕之間讓我們添加一個Padding 小組件以保持一些呼吸空間。

對每個ElevatedButton ，添加相關的Icons ，作為子部件。然后在播放按鈕onPressed 的回調里面，你可以參考_videoPlayerController ，并調用play 方法來開始播放視頻。在暫停按鈕里面，使用pause 方法而不是播放。

現(xiàn)在你可以刪除之前在initState 方法里面添加的播放。

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _videoPlayerController.value.isInitialized ? AspectRatio(aspectRatio: 
        _videoPlayerController.value.aspectRatio,
        child: VideoPlayer(_videoPlayerController)
        ) : Container(),
        Row(
          mainAxisAlignment: MainAxisAlignment.center, 
          children: [

            ElevatedButton(onPressed: (){
              _videoPlayerController.pause();
            }, child: Icon(Icons.pause)),
              Padding(padding: EdgeInsets.all(2)),
             ElevatedButton(onPressed: (){
              _videoPlayerController.play();
            }, child: Icon(Icons.play_arrow))
          ],
        )
      ],
    );
  }

另外，你可以給按鈕添加樣式，得到一個看起來很圓的按鈕，這通常是在視頻播放器中。

 @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _videoPlayerController.value.isInitialized
            ? AspectRatio(
                aspectRatio: _videoPlayerController.value.aspectRatio,
                child: VideoPlayer(_videoPlayerController))
            : Container(),
        Padding(
          padding: EdgeInsets.all(20),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
                    fixedSize: MaterialStateProperty.all(Size(70, 70)),
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(100)))),
                onPressed: () {
                  _videoPlayerController.pause();
                },
                child: Icon(Icons.pause)),
            Padding(padding: EdgeInsets.all(2)),
            ElevatedButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all<Color>(Colors.redAccent),
                    fixedSize: MaterialStateProperty.all<Size>(Size(80, 80)),
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(100)))),
                onPressed: () {
                  _videoPlayerController.play();
                },
                child: Icon(Icons.play_arrow))
          ],
        )
      ],
    );
  }

創(chuàng)建一個快進

在實現(xiàn)快進之前，讓我們思考一下我們需要什么。首先，應該有一個訪問當前視頻位置/時間的方法和一個設置新值的方法。控制器的seekTo 方法允許我們?yōu)橐曨l設置持續(xù)時間。

你可以通過視頻播放器value 屬性訪問當前的視頻位置，就像下面這樣。

ElevatedButton(
       style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
          fixedSize: MaterialStateProperty.all(Size(70, 70)),
          shape: MaterialStateProperty.all(RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(100)))),
                onPressed: () {
                  _videoPlayerController.seekTo(Duration(
                   seconds: _videoPlayerController.value.position.inSeconds + 10));
                },
                child: Icon(Icons.fast_forward))

像這樣，當用戶點擊按鈕時，你也可以通過減少10 秒來實現(xiàn)向后倒轉。

添加一個視頻進度指示器

視頻播放器插件提供了內置的功能來添加一個進度條以及一些控件。你可以使用VideoProgressIndicator widget來實現(xiàn)這個功能。

作為第一個參數，你必須傳遞控制器并設置allowScrubbing 屬性。allowScrubbing 屬性將允許用戶通過觸摸小組件來滑動進度。通過啟用這個，用戶可以跳到視頻的不同時間戳。此外，你還可以單獨控制尋求欄的背景顏色、緩沖區(qū)顏色和播放區(qū)顏色。

VideoProgressIndicator(
          _videoPlayerController,
          allowScrubbing: true,
          colors: VideoProgressColors(
              backgroundColor: Colors.red,
              bufferedColor: Colors.black,
              playedColor: Colors.blueAccent),
        )

應用視頻的字幕

字幕對你的應用程序來說需要兩樣東西。第一個是不同時期的段落/單詞列表，第二個是在視頻播放時顯示這些標題的方法。為此，應該有一種方法來為時間變化添加一個監(jiān)聽器。

視頻播放器包含一個addListener 方法，每秒鐘執(zhí)行一次。你可以使用這個監(jiān)聽器，根據不同的時間段為視頻播放器提供字幕。

首先，讓我們創(chuàng)建一個Map ，其中包含時間作為一個鍵，字幕文本作為一個值。在Map ，時間的單位將是秒。

Map<int,String> captions = {
    5:"First subtitle",
    20:"Second subtitle"
  };

接下來，在初始化視頻播放器時注冊一個Listener 。在回調里面，你可以檢查視頻是否正在播放，如果視頻正在播放，則獲得當前的時間為秒。然后，如果當前值包含在captions 地圖中，我們可以像下面這樣將該值設置為選定的標題。

void initState() {
    super.initState();
    _videoPlayerController =
        VideoPlayerController.asset('assets/video/video.mp4')
        ..addListener(() {
            if(_videoPlayerController.value.isPlaying){
              setState(() { 
                if(captions.containsKey(_videoPlayerController.value.position.inSeconds)){
              selectedCaption = captions[_videoPlayerController.value.position.inSeconds];                
                }
              });
            }
        })
          ..initialize().then((_) {
            setState(() {});
            _videoPlayerController.play();
          });
  }

現(xiàn)在你可以使用ClosedCaption 來設置那個選定的標題。你可以給標題文本添加一些樣式，以獲得更好的可見性。

 ClosedCaption(
     text: selectedCaption,textStyle: TextStyle(fontSize: 15,color: Colors.white),)

但是，每次標題改變時，建立主部件并不是好的做法。因此，我們應該把標題邏輯提取到一個單獨的小部件。

要注冊一個監(jiān)聽器，你應該把視頻控制器傳遞給一個新創(chuàng)建的子部件。

從那里，你可以在子部件內注冊監(jiān)聽器。

class VCaption extends StatefulWidget {
  const VCaption(
     this.videoPlayerController,
  );
  final VideoPlayerController videoPlayerController;
  @override
  _VCaptionState createState() => _VCaptionState();
}
class _VCaptionState extends State<VCaption> {
  String? selectedCaption = "";
  Map<int,String> captions = {
    5:"First subtitle",
    20:"Second subtitle"
  };

  @override
  void initState() {
    widget.videoPlayerController.addListener(() {
      if(widget.videoPlayerController.value.isPlaying){
              print("Time ${widget.videoPlayerController.value.position.inSeconds}");
              setState(() { 
                if(captions.containsKey(widget.videoPlayerController.value.position.inSeconds)){
              selectedCaption = captions[widget.videoPlayerController.value.position.inSeconds];                
                }
              });
            }
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return ClosedCaption(
      text: selectedCaption,textStyle: TextStyle(fontSize: 15,color: Colors.white),);
  }
}

現(xiàn)在我們可以在之前創(chuàng)建的欄目內添加這個小部件，并將_videoPlayerController 作為參數傳遞。你可以在把小部件添加到樹上之前檢查視頻播放器是否已經被初始化，就像下面這樣。

 _videoPlayerController.value.isInitialized ? VCaption(_videoPlayerController) : Container(),

你可以使用Stack widget在視頻頂部顯示這些字幕，而不是在視頻下面顯示那些字幕。字幕以及進度指示器已經被移到了Stack widget里面，以便在視頻的頂部顯示。

 Stack(
          children: [
            _videoPlayerController.value.isInitialized
                ? AspectRatio(
                    aspectRatio: _videoPlayerController.value.aspectRatio,
                    child: VideoPlayer(_videoPlayerController))
                : Container(),
            Positioned(
              bottom: 2,
              width: MediaQuery.of(context).size.width,
              child: _videoPlayerController.value.isInitialized
                  ? VCaption(_videoPlayerController)
                  : Container(),
            ),
            Positioned(
                bottom: 0,
                width: MediaQuery.of(context).size.width,
                child: VideoProgressIndicator(
                  _videoPlayerController,
                  allowScrubbing: false,
                  colors: VideoProgressColors(
                      backgroundColor: Colors.blueGrey,
                      bufferedColor: Colors.blueGrey,
                      playedColor: Colors.blueAccent),
                ))
          ],
        )

結論

使用視頻播放器插件而不是從頭開始實現(xiàn)一個視頻播放器，可以節(jié)省大量的開發(fā)時間，并提供所有開箱即用的功能。

如果您想超越這些定制，實現(xiàn)一個具有Material-和Cupertino靈感的漂亮的視頻播放器，您可以選擇chewie Flutter插件。

以上就是詳解Flutter中視頻播放器插件的使用教程的詳細內容，更多關于Flutter視頻播放器插件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Android實現(xiàn)志愿者系統(tǒng)詳細步驟與代碼
這篇文章主要介紹了Android實現(xiàn)志愿者系統(tǒng)，本系統(tǒng)采用MVC架構設計，SQLite數據表有用戶表、成員表和活動表，有十多個Activity頁面。打開應用，進入歡迎界面，3s后跳轉登錄界面，用戶先注冊賬號，登錄成功后進入主界面
2023-02-02
Android編程實現(xiàn)使用handler在子線程中更新UI示例
這篇文章主要介紹了Android編程實現(xiàn)使用handler在子線程中更新UI,涉及Android線程與界面布局相關操作技巧,需要的朋友可以參考下
2017-09-09
Android APK使用Debug簽名重新打包 Eclipse更改默認Debug簽名
這篇文章主要介紹了Android APK使用Debug簽名重新打包 Eclipse更改默認Debug簽名等內容,需要的朋友可以參考下
2015-04-04
詳細分析android的MessageQueue.IdleHandler
這篇文章主要介紹了android的MessageQueue.IdleHandler用法，很有參考價值，歡迎大家在下方留言區(qū)討論。
2017-11-11
Android App中使用ListFragment的實例教程
這篇文章主要介紹了Android App中使用ListFragment的實例教程,ListFragment的內容是以列表(list)的形式顯示的Fragment,需要的朋友可以參考下
2016-05-05
Android webview實現(xiàn)拍照的方法
這篇文章主要介紹了Android webview實現(xiàn)拍照的方法的相關資料,希望通過本文能幫助到大家實現(xiàn)這樣的功能，需要的朋友可以參考下
2017-10-10
Android學習筆記——Menu介紹(二)
這次將繼續(xù)上一篇文章沒有講完的Menu的學習，上下文菜單(Context menu)和彈出菜單(Popup menu)
2014-10-10
Android版音樂播放器
這篇文章主要為大家詳細介紹了Android版音樂播放器的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
一文帶你了解Android?Flutter中Transform的使用
flutter的強大之處在于，可以對所有的widget進行Transform，因此可以做出非?？犰诺男Ч１疚木蛠泶蠹伊私庖幌耇ransform的具體使用，感興趣的可以了解一下
2023-01-01
Android實現(xiàn)拍照、選擇圖片并裁剪圖片功能
這篇文章主要為大家詳細介紹了Android實現(xiàn)拍照、選擇圖片并裁剪圖片功能的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05