在使用视频播放器插件之前,你应该把它添加到你的pubspec.yaml文件中。当你打开pubspec.yaml文件时,你可以看到运行你的应用程序所需的一些配置和依赖性。我们的视频播放器插件应该被添加到dependencies块下。
进入你想添加该插件的文件,并导入video_player.dart文件。
import'package:video_player/video_player.dart';现在你可以在你的项目中使用视频播放器插件了。
有几种方法来加载视频。让我们从资产中加载我们的例子。在项目的根层创建一个assets/video文件夹,在该文件夹内添加一个视频。然后在pubspec.yaml,在assets部分,指定文件路径,如下所示。
你可以在initState方法中初始化视频播放器,如下所示。另外,别忘了dispose,让视频播放器做清理工作。
当初始化完成后,它改变了状态并重建了小部件。你可以在初始化后开始播放视频。
取代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之前,最好先检查初始化是否成功。
现在你可以看到屏幕上的视频了。但是有一个小问题:它的长宽比不合适。这可以通过使用AspectRatiowidget来解决。视频播放器提供了一个适当的视频长宽比,你可以使用这个值来设置为AspectRatiowidget。
@overrideWidgetbuild(BuildContextcontext){returnCenter(child:_videoPlayerController.value.isInitializedAspectRatio(aspectRatio:_videoPlayerController.value.aspectRatio,child:VideoPlayer(_videoPlayerController)):Container(),);}现在你可以看到具有适当长宽比的视频。
首先,让我们把视频播放器小部件包在一个列小部件里面,因为我们应该把播放和暂停按钮放在播放器下面。在播放器小组件之后的列内,让我们在一个Row小组件内添加两个ElevatedButton小组件,在这些按钮之间让我们添加一个Padding小组件以保持一些呼吸空间。
现在你可以删除之前在initState方法里面添加的播放。
另外,你可以给按钮添加样式,得到一个看起来很圆的按钮,这通常是在视频播放器中。
你可以通过视频播放器value属性访问当前的视频位置,就像下面这样。
视频播放器插件提供了内置的功能来添加一个进度条以及一些控件。你可以使用VideoProgressIndicatorwidget来实现这个功能。
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来设置那个选定的标题。你可以给标题文本添加一些样式,以获得更好的可见性。
但是,每次标题改变时,建立主部件并不是好的做法。因此,我们应该把标题逻辑提取到一个单独的小部件。
要注册一个监听器,你应该把视频控制器传递给一个新创建的子部件。从那里,你可以在子部件内注册监听器。
_videoPlayerController.value.isInitializedVCaption(_videoPlayerController):Container(),你可以使用Stackwidget在视频顶部显示这些字幕,而不是在视频下面显示那些字幕。字幕以及进度指示器已经被移到了Stackwidget里面,以便在视频的顶部显示。