Flutter视频播放插件ezplayer的使用
Flutter视频播放插件ezplayer的使用
支持平台
Android, iOS, MacOS, Windows, Linux
安装
我们使用了 flutter_base_player，并且它有一些额外的配置步骤，请参考这些包提供的说明文档。
示例
以下是一个完整的示例代码，展示如何在 Flutter 中使用 ezplayer 插件来播放视频。
import 'package:flutter/material.dart';
import 'package:ezplayer/ezplayer.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
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> {
FlutterBasePlayer player = FlutterBasePlayer();
BoxFit fit = BoxFit.contain;
double ratio = 4 / 3;
@override
void initState() {
player.loadNetwork('https://media.w3.org/2010/05/sintel/trailer.mp4');
// player.loadNetwork('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4');
player.play();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
children: [
const Center(
child: Text(
'Video Test',
style: TextStyle(fontSize: 24, height: 2),
),
),
SizedBox(
height: 300,
width: 300,
child: player.builder(context, fit: fit,),
// child: player.builder(context, fit: fit, ratio: ratio),
),
const SizedBox(height: 30),
Wrap(
spacing: 20,
runSpacing: 10,
children: [
TextButton(onPressed: player.play, child: const Text('play')),
TextButton(onPressed: player.pause, child: const Text('pause')),
TextButton(
onPressed: () {
setState(() {
fit = BoxFit.contain;
});
},
child: const Text('contain'),
),
TextButton(
onPressed: () {
setState(() {
fit = BoxFit.cover;
});
},
child: const Text('cover'),
),
TextButton(
onPressed: () {
setState(() {
fit = BoxFit.fill;
});
},
child: const Text('fill'),
),
TextButton(
onPressed: () {
player.seek(const Duration(seconds: 10));
},
child: const Text('seek to 10s'),
),
TextButton(
onPressed: () {
player.seek(const Duration(seconds: 20));
},
child: const Text('seek to 20s'),
),
TextButton(
onPressed: () {
player.seek(const Duration(seconds: 30));
},
child: const Text('seek to 30s'),
),
TextButton(
onPressed: () {
player.seek(const Duration(seconds: 40));
},
child: const Text('seek to 40s'),
),
TextButton(
onPressed: () {
player.seek(const Duration(seconds: 50));
},
child: const Text('seek to 50s'),
),
TextButton(
onPressed: () {
player.setLooping(true);
},
child: const Text('setLooping true'),
),
TextButton(
onPressed: () {
player.setLooping(false);
},
child: const Text('setLooping false'),
),
TextButton(
onPressed: () {
player.setPlaybackSpeed(1.0);
},
child: const Text('setPlaybackSpeed 1.0'),
),
TextButton(
onPressed: () {
player.setPlaybackSpeed(0.5);
},
child: const Text('setPlaybackSpeed 0.5'),
),
TextButton(
onPressed: () {
player.setPlaybackSpeed(2.0);
},
child: const Text('setPlaybackSpeed 2.0'),
),
TextButton(
onPressed: () {
player.setVolume(1.0);
},
child: const Text('setVolume 1.0'),
),
TextButton(
onPressed: () {
player.setVolume(0.8);
},
child: const Text('setVolume 0.8'),
),
TextButton(
onPressed: () {
player.setVolume(0.6);
},
child: const Text('setVolume 0.6'),
),
TextButton(
onPressed: () {
player.setVolume(0.0);
},
child: const Text('setVolume 0.0'),
),
],
),
const SizedBox(height: 30),
const Text('initial state:'),
Wrap(
spacing: 30,
runSpacing: 10,
alignment: WrapAlignment.start,
children: [
Text('position: ${player.position}'),
Text('duration: ${player.duration}'),
Text('aspectRatio: ${player.aspectRatio}'),
Text('isPlaying: ${player.isPlaying}'),
Text('playbackSpeed: ${player.playbackSpeed}'),
Text('size: ${player.size}'),
Text('volume: ${player.volume}'),
Text('errorMessage: ${player.errorMessage}'),
Text('hasError: ${player.hasError}'),
Text('isBuffering: ${player.isBuffering}'),
Text('isInitialized: ${player.isInitialized}'),
Text('isLooping: ${player.isLooping}'),
],
),
const SizedBox(height: 30),
const Text('real-time state:'),
ChangeNotifierBuilder(
notifier: player.eventStream,
builder: (context) {
return Wrap(
spacing: 30,
runSpacing: 10,
children: [
Text('position: ${player.position}'),
Text('duration: ${player.duration}'),
Text('aspectRatio: ${player.aspectRatio}'),
Text('isPlaying: ${player.isPlaying}'),
Text('playbackSpeed: ${player.playbackSpeed}'),
Text('size: ${player.size}'),
Text('volume: ${player.volume}'),
Text('errorMessage: ${player.errorMessage}'),
Text('hasError: ${player.hasError}'),
Text('isBuffering: ${player.isBuffering}'),
Text('isInitialized: ${player.isInitialized}'),
Text('isLooping: ${player.isLooping}'),
],
);
}
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
player.play();
},
child: const Icon(Icons.play_circle),
),
);
}
}
说明
- 初始化：在
initState方法中调用player.loadNetwork()加载网络视频。 - 控制按钮：提供了多个按钮用于播放、暂停、调整播放速度、设置音量等操作。
- 状态更新：通过
ChangeNotifierBuilder实时更新视频播放的状态信息。
注意事项
- 确保已正确安装
ezplayer插件，并在pubspec.yaml文件中添加依赖：dependencies: ezplayer: ^版本号
更多关于Flutter视频播放插件ezplayer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
