Flutter视频播放增强插件better_player_enhanced的使用
Flutter视频播放增强插件better_player_enhanced的使用
Better Player (Fixed Version)
这是一个原版 Better Player 包的修复版本,因为原开发者目前处于不活跃状态。该包解决了诸如过时的Flutter函数等问题以及其他维护更新。
原作者
更新内容
- 替换了已弃用的
hashValues
为Object.hash
(Flutter 3.27.0)。 - 维护了所有原有功能。
这个包是原始Better Player包的增强版本,但所有荣誉归于原作者创建的基础包。
如果你愿意贡献代码,并且原包再次活跃,请随时参与!
功能介绍
本插件基于 Chewie,它是一个很棒的插件,在许多情况下都能很好地工作。Better Player延续了Chewie中引入的想法,修复了常见错误,增加了更多配置选项,解决了典型用例。
特性:
- ✔️ 修复常见错误
- ✔️ 添加高级配置选项
- ✔️ 重构播放器控件
- ✔️ 播放列表支持
- ✔️ 列表视图中的视频支持
- ✔️ 字幕支持(格式:SRT、WEBVTT带HTML标签支持;HLS字幕;多个字幕)
- ✔️ HTTP Headers支持
- ✔️ BoxFit支持
- ✔️ 播放速度支持
- ✔️ HLS支持(音轨、字幕(分段)、音频轨道选择)
- ✔️ DASH支持(音轨、字幕、音频轨道选择)
- ✔️ 备选分辨率支持
- ✔️ 缓存支持
- ✔️ 通知支持
- ✔️ 画中画支持
- ✔️ DRM支持(令牌、Widevine、FairPlay EZDRM)
- ✔️ 等等…
文档
重要信息
此插件开发正在进行中。您可能会在每个版本中遇到破坏性更改。此插件由开发者业余时间免费开发。如果您需要其他支持的功能,可以自由创建PR。所有有价值的贡献都欢迎!
示例代码
以下是一个完整的示例demo,展示了如何使用better_player_enhanced
插件来构建一个简单的视频播放应用。
示例代码
import 'package:better_player/better_player.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Better Player Enhanced Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: VideoPlayerScreen(),
);
}
}
class VideoPlayerScreen extends StatefulWidget {
@override
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
late BetterPlayerController _betterPlayerController;
@override
void initState() {
super.initState();
BetterPlayerConfiguration betterPlayerConfiguration = BetterPlayerConfiguration(
aspectRatio: 16 / 9,
fit: BoxFit.contain,
);
BetterPlayerDataSource betterPlayerDataSource = BetterPlayerDataSource(
BetterPlayerDataSourceType.network,
"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
);
_betterPlayerController = BetterPlayerController(betterPlayerConfiguration);
_betterPlayerController.setupDataSource(betterPlayerDataSource);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Better Player Enhanced Demo"),
),
body: Center(
child: AspectRatio(
aspectRatio: 16 / 9,
child: BetterPlayer(controller: _betterPlayerController),
),
),
);
}
@override
void dispose() {
_betterPlayerController.dispose();
super.dispose();
}
}
运行效果
以上代码将展示一个简单的视频播放界面,您可以根据需要进行扩展和自定义。希望这段代码能帮助你快速上手并理解better_player_enhanced
插件的使用方法。
如果有任何问题或需要进一步的帮助,请随时查阅官方文档或访问示例应用程序。
更多关于Flutter视频播放增强插件better_player_enhanced的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter视频播放增强插件better_player_enhanced的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中集成和使用better_player_enhanced
插件来进行视频播放增强的代码示例。better_player_enhanced
是一个功能丰富的视频播放插件,支持多种高级功能,如全屏、画中画、字幕等。
1. 添加依赖
首先,你需要在pubspec.yaml
文件中添加better_player_enhanced
的依赖:
dependencies:
flutter:
sdk: flutter
better_player_enhanced: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get
来获取依赖。
2. 导入插件
在你的Dart文件中导入better_player_enhanced
插件:
import 'package:better_player_enhanced/better_player_enhanced.dart';
3. 初始化BetterPlayerEnhancedController
在需要播放视频的地方,初始化BetterPlayerEnhancedController
:
import 'package:flutter/material.dart';
import 'package:better_player_enhanced/better_player_enhanced.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: VideoPlayerScreen(),
);
}
}
class VideoPlayerScreen extends StatefulWidget {
@override
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
late BetterPlayerEnhancedController _betterPlayerController;
@override
void initState() {
super.initState();
BetterPlayerDataSource dataSource = BetterPlayerDataSource.network(
"https://www.example.com/path/to/your/video.mp4",
betterPlayerDataSourceType: BetterPlayerDataSourceType.network,
);
_betterPlayerController = BetterPlayerEnhancedController(
betterPlayerDataSource: dataSource,
configuration: BetterPlayerConfiguration(
aspectRatio: 16 / 9,
autoPlay: true,
controlsConfiguration: BetterPlayerControlsConfiguration(
enableFullscreen: true,
enablePictureInPicture: true,
enableSubtitles: true,
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Better Player Enhanced Example'),
),
body: Center(
child: BetterPlayerEnhanced(
controller: _betterPlayerController,
),
),
);
}
@override
void dispose() {
_betterPlayerController.dispose();
super.dispose();
}
}
4. 运行应用
现在你可以运行你的Flutter应用,应该会看到一个包含视频播放器的界面。该播放器支持全屏、画中画和字幕等功能。
5. 高级配置
你可以根据需要进一步配置BetterPlayerConfiguration
和BetterPlayerControlsConfiguration
。例如,如果你需要自定义字幕文件,可以这样做:
BetterPlayerSubtitle subtitle = BetterPlayerSubtitle.network(
"https://www.example.com/path/to/your/subtitles.vtt",
"en", // 语言代码
"English" // 显示的语言名称
);
List<BetterPlayerSubtitle> subtitles = [subtitle];
_betterPlayerController = BetterPlayerEnhancedController(
betterPlayerDataSource: dataSource,
configuration: BetterPlayerConfiguration(
aspectRatio: 16 / 9,
autoPlay: true,
controlsConfiguration: BetterPlayerControlsConfiguration(
enableFullscreen: true,
enablePictureInPicture: true,
enableSubtitles: true,
subtitlesList: subtitles,
),
),
);
这样,你就可以在播放器中看到加载的字幕了。
通过上面的步骤,你应该能够在Flutter项目中成功集成并使用better_player_enhanced
插件来增强视频播放功能。如果你有更具体的需求或遇到问题,可以参考插件的官方文档或GitHub仓库。