Flutter视频播放插件better_player_updated的使用
Flutter视频播放插件better_player_updated的使用
Better Player #
基于video_player和Chewie的高级视频播放器。它解决了许多典型用例,并且易于运行。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
简介 #
该插件基于Chewie。Chewie是一个非常棒的插件,在许多情况下工作得很好。Better Player是对Chewie引入的思想的延续。Better Player修复了常见的bug,增加了更多的配置选项,并解决了典型的用例。
特性:
- ✔️ 修复了常见的bug
- ✔️ 增加了高级配置选项
- ✔️ 重构了播放器控件
- ✔️ 支持播放列表
- ✔️ 支持在ListView中播放视频
- ✔️ 支持字幕:(格式:SRT、WEBVTT支持HTML标签;来自HLS的字幕;视频的多个字幕)
- ✔️ 支持HTTP头
- ✔️ 支持BoxFit视频
- ✔️ 支持播放速度
- ✔️ 支持HLS(轨道、字幕(也支持分段)、音频轨道选择)
- ✔️ 支持DASH(轨道、字幕、音频轨道选择)
- ✔️ 支持替代分辨率
- ✔️ 支持缓存
- ✔️ 支持通知
- ✔️ 支持画中画
- ✔️ 支持DRM(令牌、Widevine、FairPlay EZDRM)。
- ✔️ 更多功能…
文档 #
重要信息 #
此插件仍在开发中。每个版本都可能会有破坏性更改。此插件是免费的兼职开发。如果您需要一些其他播放器在pub dev上支持的功能,则可以自由创建PR。所有有价值的贡献都是受欢迎的!
完整示例Demo
以下是使用better_player_updated插件的基本示例。
import 'package:better_player/better_player.dart'; // 导入better_player包
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Better Player Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: Scaffold(
appBar: AppBar(
title: Text('Better Player Example'),
),
body: Center(
child: BetterPlayer.network( // 使用网络视频源
"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4", // 视频URL
betterPlayerConfiguration: BetterPlayerConfiguration( // 配置播放器
aspectRatio: 16 / 9, // 设置宽高比
autoPlay: true, // 自动播放
),
),
),
),
);
}
}
以上代码展示了如何使用better_player_updated插件来播放网络视频。你可以根据自己的需求调整配置项。
更多功能示例
以下是一个更复杂的示例,展示了如何使用播放列表和字幕:
import 'package:better_player/better_player.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Better Player Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: Scaffold(
appBar: AppBar(
title: Text('Better Player Example'),
),
body: Center(
child: BetterPlayerPlaylist(
betterPlayerConfigurations: [
BetterPlayerConfiguration(
aspectRatio: 16 / 9,
autoPlay: true,
),
],
betterPlayerDataSourceList: [
BetterPlayerDataSource(
BetterPlayerDataSourceType.network,
"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4",
subtitles: "assets/subtitle.srt", // 字幕文件路径
),
BetterPlayerDataSource(
BetterPlayerDataSourceType.network,
"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4",
),
],
),
),
),
);
}
}
更多关于Flutter视频播放插件better_player_updated的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter视频播放插件better_player_updated的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
better_player
是一个功能强大的 Flutter 视频播放插件,基于 video_player
和 chewie
构建,提供了更丰富的功能和更好的用户体验。better_player_updated
是 better_player
的一个更新版本,通常包含了最新的修复和改进。
以下是使用 better_player_updated
的基本步骤:
1. 添加依赖
首先,你需要在 pubspec.yaml
文件中添加 better_player_updated
依赖:
dependencies:
flutter:
sdk: flutter
better_player_updated: ^x.x.x # 使用最新版本
然后运行 flutter pub get
来获取依赖。
2. 导入库
在你的 Dart 文件中导入 better_player_updated
:
import 'package:better_player_updated/better_player.dart';
3. 使用 BetterPlayer
你可以通过 BetterPlayer
组件来播放视频。以下是一个简单的示例:
import 'package:flutter/material.dart';
import 'package:better_player_updated/better_player.dart';
class VideoPlayerScreen extends StatefulWidget {
[@override](/user/override)
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
late BetterPlayerController _betterPlayerController;
[@override](/user/override)
void initState() {
super.initState();
_initializePlayer();
}
void _initializePlayer() {
BetterPlayerDataSource betterPlayerDataSource = BetterPlayerDataSource(
BetterPlayerDataSourceType.network,
"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
);
_betterPlayerController = BetterPlayerController(
BetterPlayerConfiguration(
autoPlay: true,
looping: true,
),
betterPlayerDataSource: betterPlayerDataSource,
);
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Better Player Example'),
),
body: Center(
child: AspectRatio(
aspectRatio: 16 / 9,
child: BetterPlayer(
controller: _betterPlayerController,
),
),
),
);
}
[@override](/user/override)
void dispose() {
_betterPlayerController.dispose();
super.dispose();
}
}
void main() {
runApp(MaterialApp(
home: VideoPlayerScreen(),
));
}
4. 配置 BetterPlayer
BetterPlayerConfiguration
允许你配置播放器的行为,例如自动播放、循环播放、全屏模式等。
BetterPlayerConfiguration(
autoPlay: true,
looping: true,
fullScreenByDefault: false,
controlsConfiguration: BetterPlayerControlsConfiguration(
showControls: true,
enableProgressText: true,
),
)
5. 处理数据源
BetterPlayerDataSource
用于指定视频的来源。你可以从网络、文件或资产中加载视频。
BetterPlayerDataSource(
BetterPlayerDataSourceType.network,
"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
);
6. 控制播放器
你可以通过 BetterPlayerController
来控制播放器的行为,例如播放、暂停、跳转等。
_betterPlayerController.play();
_betterPlayerController.pause();
_betterPlayerController.seekTo(Duration(seconds: 10));
7. 全屏模式
BetterPlayer
支持全屏模式。你可以通过点击播放器上的全屏按钮或手动调用 _betterPlayerController.enterFullScreen()
来进入全屏模式。
8. 处理事件
你可以监听播放器的事件,例如播放完成、播放状态变化等。
_betterPlayerController.addEventsListener((event) {
if (event.betterPlayerEventType == BetterPlayerEventType.finished) {
print("Video finished playing");
}
});
9. 释放资源
在页面销毁时,记得释放播放器资源:
[@override](/user/override)
void dispose() {
_betterPlayerController.dispose();
super.dispose();
}