1. 添加 video_player依赖

2. 添加权限

3. 创建并初始化 VideoPlayerController

4. 展示视频播放器

5. 播放视频和暂停视频

dependencies:flutter:sdk: fluttervideo_player:

然后，你需要确保你的应用拥有从网络中获取视频流的权限。因此，你需要更新你的 android和 ios配置。

在 AndroidManifest.xml文件中的 <application>配置项下加入如下权限。AndroidManifest.xml文件的路径是 <project root>/android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"><application ...></application><uses-permission android:name="android.permission.INTERNET"/>
</manifest>

针对 iOS，你需要在 <project root>/ios/Runner/Info.plist路径下的 Info.plist文件中加入如下配置。

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

请注意

video_player插件在 iOS 模拟器上不能使用，必须要在 iOS 真机上进行测试。

video_player插件成功安装且权限设置完成后，需要创建一个 VideoPlayerController。VideoPlayerController类允许你播放不同类型的视频并进行播放控制。

在播放视频前，需要对播放控制器进行初始化。初始化过程主要是与视频源建立连接和播放控制的准备。

创建和初始化 VideoPlayerController时，请遵循以下步骤：

（1）创建一个 StatefulWidget组件和 State类

（2）在 State类中增加一个变量来存放 VideoPlayerController

（3）在 State类中增加另外一个变量来存放 VideoPlayerController.initialize返回的 Future

（4）在 initState方法里创建和初始化控制器

（5）在 dispose方法里销毁控制器

class VideoPlayerScreen extends StatefulWidget {VideoPlayerScreen({Key key}) : super(key: key);@override_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}class _VideoPlayerScreenState extends State<VideoPlayerScreen> {VideoPlayerController _controller;Future<void> _initializeVideoPlayerFuture;@overridevoid initState() {// Create an store the VideoPlayerController. The VideoPlayerController// offers several different constructors to play videos from assets, files,// or the internet._controller = VideoPlayerController.network('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',);_initializeVideoPlayerFuture = _controller.initialize();super.initState();}@overridevoid dispose() {// Ensure disposing of the VideoPlayerController to free up resources._controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {// Complete the code in the next step.}
}

4. 展示视频播放器

现在到了展示播放器的时候。video_player插件提供了 VideoPlayer组件来展示已经被 VideoPlayerController初始化完成的视频。默认情况下，VideoPlayer组件会尽可能撑满整个空间。但是这通常不会太理想，因为很多时候视频需要在特定的宽高比下展示，比如 16x9 或者 4x3。

因此，你可以把 VideoPlayer组件嵌进一个 AspectRatio组件中，保证视频播放保持正确的比例。

此外，你必须在 _initializeVideoPlayerFuture完成后才展示 VideoPlayer组件。你可以使用 FutureBuilder来展示一个旋转的加载图标直到初始化完成。请注意：控制器初始化完成并不会立即开始播放。

// 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 VideoPlayer.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 Center(child: CircularProgressIndicator());}},
)

5. 播放视频和暂停视频

默认情况下，播放器启动时会处于暂停状态。开始播放，需要调用 VideoPlayerController提供的 play()方法。停止播放，需要调用 pause()方法。

在这个示例中，向应用加入了一个 FloatingActionButton，这个按钮会根据播放状态展示播放或者暂停的图标。当用户点击按钮，会切换播放状态。如果当前是暂停状态，就开始播放。如果当前是播放状态，就暂停播放。

完整样例

import 'dart:async';import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';void main() => runApp(VideoPlayerApp());class VideoPlayerApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Video Player Demo',home: VideoPlayerScreen(),);}
}class VideoPlayerScreen extends StatefulWidget {VideoPlayerScreen({Key key}) : super(key: key);@override_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}class _VideoPlayerScreenState extends State<VideoPlayerScreen> {VideoPlayerController _controller;Future<void> _initializeVideoPlayerFuture;@overridevoid initState() {// Create and store the VideoPlayerController. The VideoPlayerController// offers several different constructors to play videos from assets, files,// or the internet._controller = VideoPlayerController.network('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);super.initState();}@overridevoid dispose() {// Ensure disposing of the VideoPlayerController to free up resources._controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: 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 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,),), // This trailing comma makes auto-formatting nicer for build methods.);}
}