接上一篇文章Flutter实现一个简单的音视频App（四），由于我有段时间没有更新博客了（做项目去了），不过后面的博客会更新比较快一点，而且我都会录好视频，欢迎关注我的公众号dongda_5g和加QQ群（174353204），有任何问题我都会回复。
进入正题：
我们先做一个简单的视频播放demo，github地址：https://github.com/jishaofeng89/video_player_demo。
我们先引入插件，这里我用的是video_player插件，截至作者写作时，最新版本为0.11.0。 video_player: ^0.11.0 上代码 import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; class VideoPlayerPage extends StatefulWidget { VideoPlayerPage({Key key}) : super(key: key); @override _VideoPlayerPageState createState() => _VideoPlayerPageState(); } class _VideoPlayerPageState extends State<VideoPlayerPage> { VideoPlayerController _videoPlayerController; // 解码url String url = "https://v.360inhands.com/【iOS从入门到放弃】第七回 获取文件要从网络下载，展现数据需要本地解析 - 1.1(Av6497757,P1).mp4"; bool _isPlaying = false; @override void initState() { // TODO: implement initState super.initState(); _videoPlayerController = VideoPlayerController.network(url); _videoPlayerController.initialize().then((value) { // 界面重新渲染 setState(() { }); }); } @override Widget build(BuildContext context) { return Scaffold( body: _videoPlayerController.value.initialized ? AspectRatio( aspectRatio: _videoPlayerController.value.aspectRatio, child: Stack( children: [ VideoPlayer( _videoPlayerController ), Positioned( bottom: 0, child: GestureDetector( child: Icon( _isPlaying ? Icons.pause : Icons.play_arrow, color: Colors.blueAccent, ), onTap: () { if(_isPlaying) { _videoPlayerController.pause(); } else { _videoPlayerController.play(); } setState(() { _isPlaying = ! _isPlaying; }); }, ), ), ], ), ) : Container( child: Center( child: Text('加载中。。。'), ), ), ); } }3.使用
import 'package:flutter/material.dart'; import 'package:video_player_demo/video_player_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. final String url = "https://v.360inhands.com/【iOS从入门到放弃】第七回 获取文件要从网络下载，展现数据需要本地解析 - 1.1(Av6497757,P1).mp4"; @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, // This makes the visual density adapt to the platform that you run // the app on. For desktop platforms, the controls will be smaller and // closer together (more dense) than on mobile platforms. visualDensity: VisualDensity.adaptivePlatformDensity, ), // home: MyHomePage(title: 'Flutter Demo Home Page'), home: VideoPlayerPage(url: url), ); } }github地址：https://github.com/jishaofeng89/video_player_demo
视频地址：https://www.bilibili.com/video/BV1x54y1k7Ce/
动哒APP Flutter 欢迎关注动哒公众号，微信搜索公众号dongda_5g，即可关注。您有任何问题可以在公众号进行回复，动哒客服会为您进行专业的解答。