经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Flutter » 查看文章
详解Flutter中视频播放器插件的使用教程
来源：jb51　　时间：2022/2/28 17:35:49　　对本文有异议

您已经看到很多包含视频内容的应用程序，比如带有视频教程的食谱应用程序、电影应用程序和体育相关的应用程序。您是否想知道如何将视频内容添加到您的下一个Flutter应用程序中？

从头开始实现视频功能将是一项繁重的任务。但有几个插件可以让开发者的生活变得轻松。视频播放器插件是可用于 Flutter 的最佳插件之一，可满足这一要求。

在这篇文章中，您将学习如何应用视频播放器插件以及控制视频播放器的不同功能。
我们将讨论这些主题。

  • 创建一个新的视频播放器
  • 添加播放和暂停按钮
  • 创建一个快进
  • 添加一个视频进度指示器
  • 应用视频的字幕

创建一个新的视频播放器

在使用视频播放器插件之前，你应该把它添加到你的pubspec.yaml 文件中。当你打开pubspec.yaml 文件时，你可以看到运行你的应用程序所需的一些配置和依赖性。我们的视频播放器插件应该被添加到dependencies 块下。

  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  4.   cupertino_icons: ^1.0.2
  5.   video_player: 2.1.15  //video player

该插件的当前版本是2.1.15 ，但你可以通过查看插件页面在这里添加最新版本。如果你保存文件时是在VS Code中，它会自动下载该插件。如果不是，打开终端，写flutter pub get 来下载该插件。

进入你想添加该插件的文件，并导入video_player.dart 文件。

  1. import 'package:video_player/video_player.dart';

现在你可以在你的项目中使用视频播放器插件了。

有几种方法来加载视频。让我们从资产中加载我们的例子。在项目的根层创建一个assets/video文件夹，在该文件夹内添加一个视频。然后在pubspec.yaml ，在assets 部分，指定文件路径，如下所示。

  1. assets:
  2.     - assets/video/video.mp4

让我们创建一个单独的有状态的部件，称为VideoPlayerWidget ，以插入我们的视频播放器相关的实现。

你可以在initState 方法中初始化视频播放器，如下所示。另外，别忘了dispose ，让视频播放器做清理工作。

  1. class _VideoPlayerState extends State<VideoPlayerWidget> {
  2.   late VideoPlayerController _videoPlayerController;
  3.   @override
  4.   void initState() {
  5.     super.initState();
  6.     _videoPlayerController = VideoPlayerController.asset(
  7.         'assets/video/video.mp4')
  8.       ..initialize().then((_) {
  9.         setState(() {});
  10.         _videoPlayerController.play();
  11.       });
  12.   }
  13.  
  14.   @override
  15.   void dispose() {
  16.     _videoPlayerController.dispose();
  17.     super.dispose();
  18.   }
  19.  
  20.   @override
  21.   Widget build(BuildContext context) {
  22.     return Center(
  23.       child: VideoPlayer(_videoPlayerController),
  24.     );
  25.   }
  26. }

VideoPlayerController 必须用late 关键字来指定，因为我们在这一行中仍然没有定义视频播放器控制器，我们将在后面做这个。在initState 里面，videoPlayerController 已经和资产的路径一起被初始化。

当初始化完成后，它改变了状态并重建了小部件。你可以在初始化后开始播放视频。

取代assets ，你可以使用视频的URL。为了访问网络，你应该给Android和iOS添加互联网权限配置。

从根目录下，进入ios/Runner ，打开info.plist 文件。然后，在该文件中添加以下配置。

  1. <key>NSAppTransportSecurity</key>
  2. <dict>
  3.   <key>NSAllowsArbitraryLoads</key>
  4.   <true/>
  5. </dict>

接下来，去android/app/src/main ，并打开AndroidManifest.xml 。然后，向其添加以下代码。

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

现在你可以把asset 改为network ，并在那里添加视频URL。

  1.   @override
  2.   void initState() {
  3.     super.initState();
  4.     _videoPlayerController =
  5.         VideoPlayerController.network('video_url_here')
  6.           ..initialize().then((_) {
  7.             setState(() {});
  8.             _videoPlayerController.play();
  9.           });
  10.   }

即使初始化已经完成，也应该有办法在用户界面中显示播放器。VideoPlayer widget可以用来做到这一点。为了使它工作，你应该把控制器作为第一个参数传递给VideoPlayer widget。

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

  1.   @override
  2.   Widget build(BuildContext context) {
  3.     return Center(
  4.       child: _videoPlayerController.value.isInitialized ? VideoPlayer(_videoPlayerController) : Container(),
  5.     );
  6.   }

现在你可以看到屏幕上的视频了。但是有一个小问题：它的长宽比不合适。这可以通过使用AspectRatio widget来解决。视频播放器提供了一个适当的视频长宽比，你可以使用这个值来设置为AspectRatio widget。

  1.   @override
  2.   Widget build(BuildContext context) {
  3.     return Center(
  4.       child: _videoPlayerController.value.isInitialized ? AspectRatio(aspectRatio: 
  5.       _videoPlayerController.value.aspectRatio,
  6.       child: VideoPlayer(_videoPlayerController)
  7.       ) : Container(),
  8.     );
  9.   }

现在你可以看到具有适当长宽比的视频。

添加播放和暂停按钮

首先，让我们把视频播放器小部件包在一个列小部件里面，因为我们应该把播放和暂停按钮放在播放器下面。在播放器小组件之后的列内，让我们在一个Row 小组件内添加两个ElevatedButton 小组件，在这些按钮之间让我们添加一个Padding 小组件以保持一些呼吸空间。

对每个ElevatedButton ，添加相关的Icons ，作为子部件。然后在播放按钮onPressed 的回调里面，你可以参考_videoPlayerController ，并调用play 方法来开始播放视频。在暂停按钮里面，使用pause 方法而不是播放。

现在你可以删除之前在initState 方法里面添加的播放。

  1.   @override
  2.   Widget build(BuildContext context) {
  3.     return Column(
  4.       mainAxisAlignment: MainAxisAlignment.center,
  5.       children: [
  6.         _videoPlayerController.value.isInitialized ? AspectRatio(aspectRatio: 
  7.         _videoPlayerController.value.aspectRatio,
  8.         child: VideoPlayer(_videoPlayerController)
  9.         ) : Container(),
  10.         Row(
  11.           mainAxisAlignment: MainAxisAlignment.center, 
  12.           children: [
  13.  
  14.             ElevatedButton(onPressed: (){
  15.               _videoPlayerController.pause();
  16.             }, child: Icon(Icons.pause)),
  17.               Padding(padding: EdgeInsets.all(2)),
  18.              ElevatedButton(onPressed: (){
  19.               _videoPlayerController.play();
  20.             }, child: Icon(Icons.play_arrow))
  21.           ],
  22.         )
  23.       ],
  24.     );
  25.   }

另外，你可以给按钮添加样式，得到一个看起来很圆的按钮，这通常是在视频播放器中。

  1.  @override
  2.   Widget build(BuildContext context) {
  3.     return Column(
  4.       mainAxisAlignment: MainAxisAlignment.center,
  5.       children: [
  6.         _videoPlayerController.value.isInitialized
  7.             ? AspectRatio(
  8.                 aspectRatio: _videoPlayerController.value.aspectRatio,
  9.                 child: VideoPlayer(_videoPlayerController))
  10.             : Container(),
  11.         Padding(
  12.           padding: EdgeInsets.all(20),
  13.         ),
  14.         Row(
  15.           mainAxisAlignment: MainAxisAlignment.center,
  16.           children: [
  17.             ElevatedButton(
  18.                 style: ButtonStyle(
  19.                     backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
  20.                     fixedSize: MaterialStateProperty.all(Size(70, 70)),
  21.                     shape: MaterialStateProperty.all(RoundedRectangleBorder(
  22.                         borderRadius: BorderRadius.circular(100)))),
  23.                 onPressed: () {
  24.                   _videoPlayerController.pause();
  25.                 },
  26.                 child: Icon(Icons.pause)),
  27.             Padding(padding: EdgeInsets.all(2)),
  28.             ElevatedButton(
  29.                 style: ButtonStyle(
  30.                     backgroundColor: MaterialStateProperty.all<Color>(Colors.redAccent),
  31.                     fixedSize: MaterialStateProperty.all<Size>(Size(80, 80)),
  32.                     shape: MaterialStateProperty.all(RoundedRectangleBorder(
  33.                         borderRadius: BorderRadius.circular(100)))),
  34.                 onPressed: () {
  35.                   _videoPlayerController.play();
  36.                 },
  37.                 child: Icon(Icons.play_arrow))
  38.           ],
  39.         )
  40.       ],
  41.     );
  42.   }

创建一个快进

在实现快进之前，让我们思考一下我们需要什么。首先，应该有一个访问当前视频位置/时间的方法和一个设置新值的方法。控制器的seekTo 方法允许我们为视频设置持续时间。

你可以通过视频播放器value 属性访问当前的视频位置，就像下面这样。

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

像这样，当用户点击按钮时，你也可以通过减少10 秒来实现向后倒转。

添加一个视频进度指示器

视频播放器插件提供了内置的功能来添加一个进度条以及一些控件。你可以使用VideoProgressIndicator widget来实现这个功能。

作为第一个参数，你必须传递控制器并设置allowScrubbing 属性。allowScrubbing 属性将允许用户通过触摸小组件来滑动进度。通过启用这个，用户可以跳到视频的不同时间戳。此外，你还可以单独控制寻求栏的背景颜色、缓冲区颜色和播放区颜色。

  1. VideoProgressIndicator(
  2.           _videoPlayerController,
  3.           allowScrubbing: true,
  4.           colors: VideoProgressColors(
  5.               backgroundColor: Colors.red,
  6.               bufferedColor: Colors.black,
  7.               playedColor: Colors.blueAccent),
  8.         )

应用视频的字幕

字幕对你的应用程序来说需要两样东西。第一个是不同时期的段落/单词列表，第二个是在视频播放时显示这些标题的方法。为此，应该有一种方法来为时间变化添加一个监听器。

视频播放器包含一个addListener 方法，每秒钟执行一次。你可以使用这个监听器，根据不同的时间段为视频播放器提供字幕。

首先，让我们创建一个Map ，其中包含时间作为一个键，字幕文本作为一个值。在Map ，时间的单位将是秒。

  1. Map<int,String> captions = {
  2.     5:"First subtitle",
  3.     20:"Second subtitle"
  4.   };

接下来，在初始化视频播放器时注册一个Listener 。在回调里面，你可以检查视频是否正在播放，如果视频正在播放，则获得当前的时间为秒。然后，如果当前值包含在captions 地图中，我们可以像下面这样将该值设置为选定的标题。

  1. void initState() {
  2.     super.initState();
  3.     _videoPlayerController =
  4.         VideoPlayerController.asset('assets/video/video.mp4')
  5.         ..addListener(() {
  6.             if(_videoPlayerController.value.isPlaying){
  7.               setState(() { 
  8.                 if(captions.containsKey(_videoPlayerController.value.position.inSeconds)){
  9.               selectedCaption = captions[_videoPlayerController.value.position.inSeconds];                
  10.                 }
  11.               });
  12.             }
  13.         })
  14.           ..initialize().then((_) {
  15.             setState(() {});
  16.             _videoPlayerController.play();
  17.           });
  18.   }

现在你可以使用ClosedCaption 来设置那个选定的标题。你可以给标题文本添加一些样式，以获得更好的可见性。

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

但是，每次标题改变时，建立主部件并不是好的做法。因此，我们应该把标题逻辑提取到一个单独的小部件。

要注册一个监听器，你应该把视频控制器传递给一个新创建的子部件。

从那里，你可以在子部件内注册监听器。

  1. class VCaption extends StatefulWidget {
  2.   const VCaption(
  3.      this.videoPlayerController,
  4.   );
  5.   final VideoPlayerController videoPlayerController;
  6.   @override
  7.   _VCaptionState createState() => _VCaptionState();
  8. }
  9. class _VCaptionState extends State<VCaption> {
  10.   String? selectedCaption = "";
  11.   Map<int,String> captions = {
  12.     5:"First subtitle",
  13.     20:"Second subtitle"
  14.   };
  15.  
  16.   @override
  17.   void initState() {
  18.     widget.videoPlayerController.addListener(() {
  19.       if(widget.videoPlayerController.value.isPlaying){
  20.               print("Time ${widget.videoPlayerController.value.position.inSeconds}");
  21.               setState(() { 
  22.                 if(captions.containsKey(widget.videoPlayerController.value.position.inSeconds)){
  23.               selectedCaption = captions[widget.videoPlayerController.value.position.inSeconds];                
  24.                 }
  25.               });
  26.             }
  27.     });
  28.     super.initState();
  29.   }
  30.   @override
  31.   Widget build(BuildContext context) {
  32.     return ClosedCaption(
  33.       text: selectedCaption,textStyle: TextStyle(fontSize: 15,color: Colors.white),);
  34.   }
  35. }

现在我们可以在之前创建的栏目内添加这个小部件，并将_videoPlayerController 作为参数传递。你可以在把小部件添加到树上之前检查视频播放器是否已经被初始化，就像下面这样。

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

你可以使用Stack widget在视频顶部显示这些字幕，而不是在视频下面显示那些字幕。字幕以及进度指示器已经被移到了Stack widget里面，以便在视频的顶部显示。

  1.  Stack(
  2.           children: [
  3.             _videoPlayerController.value.isInitialized
  4.                 ? AspectRatio(
  5.                     aspectRatio: _videoPlayerController.value.aspectRatio,
  6.                     child: VideoPlayer(_videoPlayerController))
  7.                 : Container(),
  8.             Positioned(
  9.               bottom: 2,
  10.               width: MediaQuery.of(context).size.width,
  11.               child: _videoPlayerController.value.isInitialized
  12.                   ? VCaption(_videoPlayerController)
  13.                   : Container(),
  14.             ),
  15.             Positioned(
  16.                 bottom: 0,
  17.                 width: MediaQuery.of(context).size.width,
  18.                 child: VideoProgressIndicator(
  19.                   _videoPlayerController,
  20.                   allowScrubbing: false,
  21.                   colors: VideoProgressColors(
  22.                       backgroundColor: Colors.blueGrey,
  23.                       bufferedColor: Colors.blueGrey,
  24.                       playedColor: Colors.blueAccent),
  25.                 ))
  26.           ],
  27.         )

结论

使用视频播放器插件而不是从头开始实现一个视频播放器，可以节省大量的开发时间，并提供所有开箱即用的功能。

如果您想超越这些定制，实现一个具有Material-和Cupertino灵感的漂亮的视频播放器，您可以选择chewie Flutter插件。

以上就是详解Flutter中视频播放器插件的使用教程的详细内容，更多关于Flutter视频播放器插件的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Flutter热门文章

  • flutter监听app进入前后台状态的实现
  • Flutter开发之支持放大镜的输入框功能实现
  • Android&nbsp;Flutter实现图片滑动切换效果
  • 详解Flutter中视频播放器插件的使用教程
  • flutter&nbsp;微信聊天输入框功能实现
  • 详解如何在Flutter中获取设备标识符
  • Android使用Flutter实现录音插件
  • Flutter 编写收音机开源
  • Android?Flutter实现精灵图的使用详解
  • Flutter配置代理抓包实现过程详解

    • Flutter推荐文章

  • 【Flutter】一文读懂混入类Mixin
  • 深入理解 Flutter 图片加载原理
  • Flutter系列文章-Flutter进阶2
  • Flutter调优--深入探究MediaQuery引起界面Rebuild的原因及解决办法
  • flutter&nbsp;微信聊天输入框功能实现
  • 与 Flutter 共创未来 | Flutter Forward 活动精彩回顾
  • Flutter框架渲染流程与使用
  • Flutter异常监控 - 叁 | 从bugsnag源码学习如何追溯异常产生路径
  • Compose声明式代码语法对比React?Flutter?SwiftUI
  • Android使用Flutter实现录音插件

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号