在Flutter中，官方提供了一个 video_player 插件可以播放视频，但是 video_player 有一些局限性。没法控制底部播放进度等。所以我们主要给大家讲解一个第三方的视频播放库 chewie。chewie 是一个非官方的第三方视频播放组件，它是基于 video_player 的。Chewie相对于 video_player 来说，有控制栏和全屏的功能。
代码如下：
代码语言：javascript复制import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';
class VideoPlayerPage extends StatefulWidget {
VideoPlayerPage({Key key}) : super(key: key);
_VideoPlayerPageState createState() => _VideoPlayerPageState();
}
class _VideoPlayerPageState extends State<VideoPlayerPage> {
VideoPlayerController videoPlayerController;
ChewieController chewieController;
@override
void initState() {
super.initState();
//配置视频地址
videoPlayerController = VideoPlayerController.network(
'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4');
chewieController = ChewieController(
videoPlayerController: videoPlayerController,
aspectRatio: 3 / 2, //宽高比
autoPlay: true, //自动播放
looping: true, //循环播放
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("视频播放器")),
body: Center(
//视频播放器
child: Chewie(
controller: chewieController,
),
),
);
}
@override
void dispose() {
/**
* 当页面销毁的时候，将视频播放器也销毁
* 否则，当页面销毁后会继续播放视频！
*/
videoPlayerController.dispose();
chewieController.dispose();
super.dispose();
}
}效果如下：
有以下几点需要注意：
1，chewie是依赖 video_player 的，所以两个第三方都需要引入：
代码语言：javascript复制chewie: ^0.9.7
video_player: ^0.10.2 12，一定要在页面销毁的时候销毁试图播放器，不然的话，在返回其他页面或者跳入其他页面的时候，原来页面的视频还在播放。
以上。
