fplayer—Flutter播放器插件

如何使用 fplayer 插件内置 UI 以及怎样构建自定义视频播放器？

fplayer 是一个 Flutter 插件，用于在移动应用程序中实现视频播放功能。该插件提供了丰富的 API 和可定制的 UI，可以满足不同应用场景的需求。在本文中，我们将介绍如何使用 fplayer 插件及其官网内置 UI 构建一个自定义的视频播放器。

第一步：安装 fplayer 插件

首先，我们需要在 Flutter 项目中安装 fplayer 插件。可以通过在项目的 pubspec.yaml 文件中添加以下依赖来完成安装：

dependencies:
  fplayer: ^1.0.2

然后，在项目目录中运行 flutter pub get 命令来安装插件。

第二步：使用 fplayer 官网内置 UI

fplayer 官网提供了一些内置的 UI 样式，可以直接在项目中使用。以下是一个示例代码，展示如何使用内置 UI 样式来构建视频播放器：

import 'package:flutter/material.dart';
import 'package:fplayer/fplayer.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'fplayer Demo',
theme: ThemeData(
primaryColor: const Color(0xFF07B9B9),
primaryColorDark: const Color(0xFFFFFFFF),
primaryColorLight: const Color(0x33000000),
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
overlayColor: MaterialStateProperty.all(Colors.transparent),
),
),
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final FPlayer player = FPlayer();
// 视频列表
List<VideoItem> videoList = [    VideoItem(      title: '第一集',      subTitle: '视频1副标题',      url: '<http://player.alicdn.com/video/aliyunmedia.mp4>',    ),    VideoItem(      title: '第二集',      subTitle: '视频2副标题',      url: '<https://www.runoob.com/try/demo_source/mov_bbb.mp4>',    ),    VideoItem(      title: '第三集',      subTitle: '视频3副标题',      url: '<http://player.alicdn.com/video/aliyunmedia.mp4>',    ),  ];
// 视频索引,单个视频可不传
int videoIndex = 0;
// 播放传入的url
Future<void> setVideoUrl(String url) async {
try {
await player.setDataSource(url, autoPlay: true, showCover: true);
} catch (error) {
print("播放-异常: $error");
return;
}
}
@override
void initState() {
super.initState();
setVideoUrl(videoList[videoIndex].url);
}
@override
void dispose() {
super.dispose();
player.release();
}
@override
Widget build(BuildContext context) {
MediaQueryData mediaQueryData = MediaQuery.of(context);
Size size = mediaQueryData.size;
double videoHeight = size.width * 9 / 16;
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Column(
children: [
FView(
player: player,
width: double.infinity,
height: videoHeight, // 需自行设置，此处宽度/高度=16/9
color: Colors.black,
fsFit: FFit.contain, // 全屏模式下的填充
fit: FFit.fill, // 正常模式下的填充
panelBuilder: fPanelBuilder(
// 视频列表开关
videos: true,
// 视频列表列表
videoMap: videoList,
// 当前视频索引
videoIndex: videoIndex,
// 播放下一集视频回调
playNextVideoFun: () {
setState(() {
videoIndex += 1;
});
},
// 视频播放错误点击刷新回调
onVideoEnd: () async {
// 视频结束最后一集的时候会有个UI层显示出来可以触发重新开始
var index = videoIndex + 1;
if (index < videoList.length) {
await player.reset();
setState(() {
videoIndex = index;
});
setVideoUrl(videoList[index].url);
}
},
),
),
// 自定义小屏列表
Container(
width: double.infinity,
height: 30,
margin: const EdgeInsets.all(20),
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.zero,
itemCount: videoList.length,
itemBuilder: (context, index) {
bool isCurrent = videoIndex == index;
Color textColor = Theme.of(context).primaryColor;
Color bgColor = Theme.of(context).primaryColorDark;
Color borderColor = Theme.of(context).primaryColor;
if (isCurrent) {
textColor = Theme.of(context).primaryColorDark;
bgColor = Theme.of(context).primaryColor;
borderColor = Theme.of(context).primaryColor;
}
return GestureDetector(
onTap: () async {
await player.reset();
setState(() {
videoIndex = index;
});
setVideoUrl(videoList[index].url);
},
child: Container(
margin: EdgeInsets.only(left: index == 0 ? 0 : 10),
padding: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: bgColor,
border: Border.all(
width: 1.5,
color: borderColor,
),
),
alignment: Alignment.center,
child: Text(
videoList[index].title,
style: TextStyle(
fontSize: 15,
color: textColor,
),
),
),
);
},
),
),
],
),
);
}
}

在上述代码中，我们使用 FView 组件来构建一个视频播放器，其中 fPanelBuilder 参数为内置UI组件，下面是对组件内的参数介绍:

属性：

方法：

第三步：自定义 fplayer 样式

如果您不希望使用内置 UI 样式，也可以自定义 fplayer 样式。以下是一个示例代码，展示如何自定义样式：

class CustomFPanel extends StatefulWidget {
final FPlayer player;
final BuildContext buildContext;
final Size viewSize;
final Rect texturePos;
const CustomFPanel({
@required this.player,
this.buildContext,
this.viewSize,
this.texturePos,
});
@override
_CustomFPanelState createState() => _CustomFPanelState();
}
class _CustomFPanelState extends State<CustomFPanel> {
FPlayer get player => widget.player;
bool _playing = false;
@override
void initState() {
super.initState();
widget.player.addListener(_playerValueChanged);
}
void _playerValueChanged() {
FValue value = player.value;
bool playing = (value.state == FState.started);
if (playing != _playing) {
setState(() {
_playing = playing;
});
}
}
@override
Widget build(BuildContext context) {
Rect rect = Rect.fromLTRB(
max(0.0, widget.texturePos.left),
max(0.0, widget.texturePos.top),
min(widget.viewSize.width, widget.texturePos.right),
min(widget.viewSize.height, widget.texturePos.bottom),
);
return Positioned.fromRect(
rect: rect,
child: Container(
alignment: Alignment.bottomLeft,
child: IconButton(
icon: Icon(
_playing ? Icons.pause : Icons.play_arrow,
color: Colors.white,
),
onPressed: () {
_playing ? widget.player.pause() : widget.player.start();
},
),
),
);
}
@override
void dispose() {
super.dispose();
player.removeListener(_playerValueChanged);
}
}

在上述代码中，我们创建了CustomFPanel组件，接下来只需要把这个组件传入Fview的panelBuilder参数，一个简单的自定义皮肤就实现了。

FView(
player: player,
panelBuilder: (
FPlayer player,
FData data,
BuildContext context,
Size viewSize,
Rect texturePos,
) {
return CustomFPanel(
player: player,
buildContext: context,
viewSize: viewSize,
texturePos: texturePos,
);
},
)

结论

在本文中，我们介绍了如何使用 fplayer 插件及其官网内置 UI 以及构建自定义的视频播放器。无论您是想使用内置样式还是自定义样式，fplayer 都提供了丰富的 API 和可定制的 UI，可以满足不同应用场景的需求。如果您正在开发一款移动应用程序并需要视频播放功能，fplayer 可以是一个不错的选择。更多关于fplayer的内容请查看fplayer官网。