Flutter视频播放器插件fijkplayer_update的使用
Flutter视频播放器插件fijkplayer_update的使用
适配flutter3.10
fijkplayer (Video player plugin for Flutter) Flutter 媒体播放器
✨ 手把手带你写 Flutter 系统音量插件 ✨ Flutter 多版本管理工具 fvm ✨
A Flutter media player plugin for iOS and android based on ijkplayer
您的支持是我们开发的动力。 欢迎Star,欢迎PR~。 Feedback welcome 和 Pull Requests 都非常欢迎!
Documentation 文档
- Development Documentation https://fijkplayer.befovy.com/docs/en/ 快速开始、指南、和fijkplayer概念理解
- 开发文档 https://fijkplayer.befovy.com/docs/zh/ 包含快速开始、使用指南、fijkplayer 中的概念理解
- dart api https://pub.dev/documentation/fijkplayer/ 详细API及参数解释
- Release Notes https://github.com/befovy/fijkplayer/releases 和 CHANGELOG.md
- FAQ https://fijkplayer.befovy.com/docs/zh/faq.html
Installation 安装
在您的 pubspec.yaml
文件中添加 fijkplayer
作为依赖。
dependencies:
fijkplayer_update: ^{{latest version}}
替换 {{latest version}}
为上面徽标中的版本号。
如果您想使用未发布到pub的git分支:
dependencies:
fijkplayer_update:
git:
url: https://github.com/befovy/fijkplayer.git
ref: develop # 可以替换为分支或标签名
Example 示例
以下是一个简单的示例代码,展示如何使用 fijkplayer_update
插件来播放视频。
import 'package:fijkplayer_update/fijkplayer.dart';
import 'package:flutter/material.dart';
class VideoScreen extends StatefulWidget {
final String url;
VideoScreen({@required this.url});
[@override](/user/override)
_VideoScreenState createState() => _VideoScreenState();
}
class _VideoScreenState extends State<VideoScreen> {
final FijkPlayer player = FijkPlayer();
_VideoScreenState();
[@override](/user/override)
void initState() {
super.initState();
player.setDataSource(widget.url, autoPlay: true);
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Fijkplayer Example")),
body: Container(
alignment: Alignment.center,
child: FijkView(
player: player,
),
));
}
[@override](/user/override)
void dispose() {
super.dispose();
player.release();
}
}
Contributors 贡献者 ✨
感谢这些优秀的人们(emoji key)
本项目遵循 all-contributors 规范。任何形式的贡献都欢迎。
iOS Warning 警告
警告:fijkplayer视频播放器插件在iOS模拟器上不可用。在开发/测试期间必须使用iOS设备。更多详情,请参阅此 issue。
Join Ding Talk Group 加入钉钉群
加入钉钉群 | 微信赞赏码 | 支付宝 |
---|---|---|
![]() |
![]() |
![]() |
完整示例Demo
以下是一个完整的示例Demo,展示了如何创建一个包含视频播放器的Flutter应用。
import 'package:flutter/material.dart';
import 'video_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Color(0xFFffd54f),
primaryColorDark: Color(0xFFffc107),
primaryColorLight: Color(0xFFffecb3),
dividerColor: Color(0xFFBDBDBD),
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => VideoScreen(url: "https://www.example.com/video.mp4"),
),
);
},
child: Text('Play Video'),
),
),
);
}
}
更多关于Flutter视频播放器插件fijkplayer_update的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter视频播放器插件fijkplayer_update的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用fijkplayer_update
插件来实现视频播放功能的代码示例。fijkplayer_update
是fijkplayer
的一个更新版本或分支,它提供了强大的视频播放功能。
首先,确保你已经在pubspec.yaml
文件中添加了fijkplayer_update
依赖:
dependencies:
flutter:
sdk: flutter
fijkplayer_update: ^x.y.z # 请替换为实际的版本号
然后运行flutter pub get
来安装依赖。
接下来,是一个简单的示例,展示如何使用fijkplayer_update
来播放视频:
import 'package:flutter/material.dart';
import 'package:fijkplayer_update/fijkplayer_update.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FijkPlayer Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: VideoPlayerScreen(),
);
}
}
class VideoPlayerScreen extends StatefulWidget {
@override
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
FijkPlayer _fijkPlayer = FijkPlayer();
@override
void initState() {
super.initState();
// 设置视频源URL
String videoUrl = 'https://www.example.com/path/to/your/video.mp4';
_fijkPlayer.setDataSource(
dataSource: FijkDataSource.network(videoUrl),
autoPlay: true,
);
// 监听播放状态变化
_fijkPlayer.setPlayerStateListener((oldState, newState) {
print("Player state changed from $oldState to $newState");
});
// 监听播放进度
_fijkPlayer.setPositionListener((position, duration) {
print("Current position: $position, Duration: $duration");
});
}
@override
void dispose() {
_fijkPlayer.release();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FijkPlayer Demo'),
),
body: Center(
child: FijkPlayerWidget(
player: _fijkPlayer,
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
onPressed: () {
_fijkPlayer.play();
},
tooltip: 'Play',
child: Icon(Icons.play_arrow),
),
SizedBox(height: 10),
FloatingActionButton(
onPressed: () {
_fijkPlayer.pause();
},
tooltip: 'Pause',
child: Icon(Icons.pause),
),
SizedBox(height: 10),
FloatingActionButton(
onPressed: () {
_fijkPlayer.seekTo(10000); // 跳转到10秒
},
tooltip: 'Seek to 10s',
child: Icon(Icons.fast_forward),
),
],
),
);
}
}
在这个示例中,我们做了以下几件事:
- 在
pubspec.yaml
文件中添加了fijkplayer_update
依赖。 - 创建了一个Flutter应用,其中包含一个视频播放器屏幕。
- 在
_VideoPlayerScreenState
类中初始化了FijkPlayer
实例,并设置了视频源URL。 - 添加了播放状态监听器和播放进度监听器。
- 使用
FijkPlayerWidget
来显示视频播放器,并添加了几个FloatingActionButton
来控制播放(播放、暂停、跳转到10秒)。
确保将videoUrl
替换为你自己的视频URL。运行这个应用,你应该能看到视频播放器并控制视频的播放。