在使用视频播放器插件之前，你应该把它添加到你的pubspec.yaml文件中。当你打开pubspec.yaml文件时，你可以看到运行你的应用程序所需的一些配置和依赖性。我们的视频播放器插件应该被添加到dependencies块下。
进入你想添加该插件的文件，并导入video_player.dart文件。
import'package:video_player/video_player.dart';现在你可以在你的项目中使用视频播放器插件了。
有几种方法来加载视频。让我们从资产中加载我们的例子。在项目的根层创建一个assets/video文件夹，在该文件夹内添加一个视频。然后在pubspec.yaml，在assets部分，指定文件路径，如下所示。
你可以在initState方法中初始化视频播放器，如下所示。另外，别忘了dispose，让视频播放器做清理工作。
class_VideoPlayerStateextendsState
当初始化完成后，它改变了状态并重建了小部件。你可以在初始化后开始播放视频。
取代assets，你可以使用视频的URL。为了访问网络，你应该给Android和iOS添加互联网权限配置。
从根目录下，进入ios/Runner，打开info.plist文件。然后，在该文件中添加以下配置。
@overridevoidinitState(){super.initState();_videoPlayerController=VideoPlayerController.network('video_url_here')..initialize().then((_){setState((){});_videoPlayerController.play();});}即使初始化已经完成，也应该有办法在用户界面中显示播放器。VideoPlayerwidget可以用来做到这一点。为了使它工作，你应该把控制器作为第一个参数传递给VideoPlayerwidget。
在显示VideoPlayerwidget之前，最好先检查初始化是否成功。
@overrideWidgetbuild(BuildContextcontext){returnCenter(child:_videoPlayerController.value.isInitializedVideoPlayer(_videoPlayerController):Container(),);}
现在你可以看到屏幕上的视频了。但是有一个小问题：它的长宽比不合适。这可以通过使用AspectRatiowidget来解决。视频播放器提供了一个适当的视频长宽比，你可以使用这个值来设置为AspectRatiowidget。
@overrideWidgetbuild(BuildContextcontext){returnCenter(child:_videoPlayerController.value.isInitializedAspectRatio(aspectRatio:_videoPlayerController.value.aspectRatio,child:VideoPlayer(_videoPlayerController)):Container(),);}现在你可以看到具有适当长宽比的视频。
首先，让我们把视频播放器小部件包在一个列小部件里面，因为我们应该把播放和暂停按钮放在播放器下面。在播放器小组件之后的列内，让我们在一个Row小组件内添加两个ElevatedButton小组件，在这些按钮之间让我们添加一个Padding小组件以保持一些呼吸空间。
现在你可以删除之前在initState方法里面添加的播放。
@overrideWidgetbuild(BuildContextcontext){returnColumn(mainAxisAlignment:MainAxisAlignment.center,children:[_videoPlayerController.value.isInitializedAspectRatio(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))],)],);}
另外，你可以给按钮添加样式，得到一个看起来很圆的按钮，这通常是在视频播放器中。
你可以通过视频播放器value属性访问当前的视频位置，就像下面这样。
ElevatedButton(style:ButtonStyle(backgroundColor:MaterialStateProperty.all
视频播放器插件提供了内置的功能来添加一个进度条以及一些控件。你可以使用VideoProgressIndicatorwidget来实现这个功能。
VideoProgressIndicator(_videoPlayerController,allowScrubbing:true,colors:VideoProgressColors(backgroundColor:Colors.red,bufferedColor:Colors.black,playedColor:Colors.blueAccent),)
voidinitState(){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();});}现在你可以使用ClosedCaption来设置那个选定的标题。你可以给标题文本添加一些样式，以获得更好的可见性。
ClosedCaption(text:selectedCaption,textStyle:TextStyle(fontSize:15,color:Colors.white),)
但是，每次标题改变时，建立主部件并不是好的做法。因此，我们应该把标题逻辑提取到一个单独的小部件。
要注册一个监听器，你应该把视频控制器传递给一个新创建的子部件。
从那里，你可以在子部件内注册监听器。
_videoPlayerController.value.isInitializedVCaption(_videoPlayerController):Container(),你可以使用Stackwidget在视频顶部显示这些字幕，而不是在视频下面显示那些字幕。字幕以及进度指示器已经被移到了Stackwidget里面，以便在视频的顶部显示。
Stack(children:[_videoPlayerController.value.isInitializedAspectRatio(aspectRatio:_videoPlayerController.value.aspectRatio,child:VideoPlayer(_videoPlayerController)):Container(),Positioned(bottom:2,width:MediaQuery.of(context).size.width,child:_videoPlayerController.value.isInitializedVCaption(_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),))],)