Flutter腾讯视频播放插件flutter_tencentplayer的使用
Flutter腾讯视频播放插件flutter_tencentplayer的使用
作者其他文章推荐:
正文:
线上项目应用运行效果:
demo apk:
demo功能:
![图片](http://file.jinxianyun.com/tencentplayer_1_2_0preview.png)
0.Tip
- 必须真机
- 打包事项: 见文章底部
1.Setup
flutter_tencentplayer: ${last_version}
或
flutter_tencentplayer:
git:
url: https://github.com/qq326646683/flutter_tencentplayer.git
For Android
- project/android/build.gradle 添加依赖的aar:
def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
}
allprojects {
repositories {
google()
jcenter()
flatDir {
dirs "${plugins.get("flutter_tencentplayer")}android/libs"
}
}
}
- AndroidManifest.xml 声明权限:
<!--网络权限-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<!--点播播放器悬浮窗权限-->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<!--存储-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
For Ios
//项目的info.plist文件上添加如下权限
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
2.Usage(TencentPlayer)
和video_player api相似,支持直播源,视频跳转,切换视频源,边下边播放,清晰度切换,设置播放速度。
1. 初始化播放器,支持asset、network、filePath、fileId四种方式播放
TencentPlayerController _controller;
_MyAppState() {
listener = () {
if (!mounted) {
return;
}
setState(() {});
};
}
initState() {
_controller = TencentPlayerController.network('http://file.jinxianyun.com/testhaha.mp4', playerConfig: PlayerConfig())
//_controller = TencentPlayerController.asset('static/tencent1.mp4')
//_controller = TencentPlayerController.file('/storage/emulated/0/test.mp4')
//_controller = TencentPlayerController.network(null, playerConfig: {auth: {"appId": 1252463788, "fileId": '4564972819220421305'}})
..initialize().then((_) {
setState(() {});
});
_controller.addListener(listener);
}
2. 播放器配置参数
_controller = TencentPlayerController.network(url, playerConfig: PlayerConfig())
Prop | Type | Default | Note |
---|---|---|---|
autoPlay | bool | true | 是否自动播放 |
loop | bool | false | 是否循环播放 |
headers | Map<String, String> | - | 请求头 |
cachePath | String | - | 缓存路径(边播放边下载) |
progressInterval | int | 1 | 播放进度回调频率(秒) |
startTime | int | 0 | 哪里开始播放(秒) |
auth | Map<String, dynamic> | - | 云点播视频源appId&fileId&sign |
supportBackground | bool | false | 是否后台播放 |
3. 播放器回调
Text("总时长:" + _controller.value.duration.toString())
Prop | Type | Note |
---|---|---|
initialized | bool | 是否初始化完成从而显示播放器 |
aspectRatio | double | 用来控制播放器宽高比 |
duration | Duration | 时长 |
position | Duration | 播放进度 |
playable | Duration | 缓冲进度 |
isPlaying | bool | 是否在播放 |
size | Size | 视频宽高 |
isLoading | bool | 是否在加载 |
netSpeed | int | 视频播放网速 |
fps | int | 视频帧率 |
rate | double | 播放速度 |
bitrateIndex | int | 视频清晰度 |
orientation | int | 手机旋转角度(android only) |
degree | int | 本地file视频自带旋转属性 |
eventCode | int | 事件监听code |
4. 播放器事件
a. 跳转进度
_controller.seekTo(Duration(seconds: 5));
b. 设置播放速度
_controller.setRate(1.5); // 1.0 ~ 2.0
c. 切换播放源
controller?.removeListener(listener);
controller?.pause();
controller = TencentPlayerController.network(url, playerConfig: PlayerConfig(startTime: startTime ?? controller.value.position.inSeconds));
controller?.initialize().then((_) {
if (mounted) setState(() {});
});
controller?.addListener(listener);
d. 切换清晰度(实质就是切换播放源)
3.Usage(Download)
离线下载, 支持断点续传(这里只支持m3u8视频、fileId), 支持多文件同时下载。
1. 初始化下载器
DownloadController _downloadController;
_MyAppState() {
downloadListener = () {
if (!mounted) {
return;
}
setState(() {});
};
}
initState() {
_downloadController = DownloadController('/storage/emulated/0/tencentdownload', appId: 1252463788);
_downloadController.addListener(downloadListener);
}
2. 下载事件
a. 下载
_downloadController.dowload("4564972819220421305", quanlity: 2);
// _downloadController.dowload("http://1253131631.vod2.myqcloud.com/26f327f9vodgzp1253131631/f4bdff799031868222924043041/playlist.m3u8");
b. 暂停下载
_downloadController.pauseDownload("4564972819220421305");
// _downloadController.stopDownload("http://1253131631.vod2.myqcloud.com/26f327f9vodgzp1253131631/f4bdff799031868222924043041/playlist.m3u8");
c. 取消下载
_downloadController.cancelDownload("4564972819220421305");
// _downloadController.cancelDownload("http://1253131631.vod2.myqcloud.com/26f327f9vodgzp1253131631/f4bdff799031868222924043041/playlist.m3u8");
3. 下载信息回调
因为支持多文件同时下载,回调以Map<String, DownloadValue>返回,key为url/fileId
Prop | Type | Note |
---|---|---|
downloadStatus | String | “start”、“progress”、“stop”、“complete”、“error” |
quanlity | int | 1: “FLU”、2: “SD”、3: “HD”、4: “FHD”、5: “2K”、6: “4K” |
duration | int | - |
size | int | 文件大小 |
downloadSize | int | 已下载大小 |
progress | int | 已下载进度 |
playPath | String | 下载文件的绝对路径 |
isStop | bool | 是否暂停下载 |
url | String | 下载的视频链接 |
fileId | String | 下载的视频FileId |
error | String | 下载的错误信息 |
4. Example
5. 打包注意事项
- flutter打包命令:
flutter build apk --release
- 混淆配置:
1. android/app/build.gradle
buildTypes {
release {
...
// add
ndk {
abiFilters 'armeabi-v7a'
}
shrinkResources true
minifyEnabled true
useProguard true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
2.android/app/proguard-rules.pro没有该文件则新建
-keep class com.tencent.** { *; }
更多关于Flutter腾讯视频播放插件flutter_tencentplayer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter腾讯视频播放插件flutter_tencentplayer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,关于Flutter中flutter_tencentplayer
插件的使用,下面是一个简单的代码案例来展示如何在Flutter应用中集成和播放腾讯视频。
首先,确保你已经在pubspec.yaml
文件中添加了flutter_tencentplayer
依赖,并运行flutter pub get
来安装它:
dependencies:
flutter:
sdk: flutter
flutter_tencentplayer: ^最新版本号 # 请替换为实际的最新版本号
接下来,你可以按照以下步骤在你的Flutter应用中集成和使用flutter_tencentplayer
:
- 导入包:
在你的Dart文件中导入flutter_tencentplayer
包。
import 'package:flutter/material.dart';
import 'package:flutter_tencentplayer/flutter_tencentplayer.dart';
- 创建TencentPlayerController:
创建一个TencentPlayerController
实例来控制视频的播放。
class _MyHomePageState extends State<MyHomePage> {
late TencentPlayerController _controller;
@override
void initState() {
super.initState();
_controller = TencentPlayerController(
vid: '视频ID', // 替换为你的腾讯视频ID
autoPlay: true, // 是否自动播放
muted: false, // 是否静音
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
- 构建UI:
使用TencentPlayer
小部件来显示视频播放器。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tencent Video Player Example'),
),
body: Center(
child: TencentPlayer(
controller: _controller,
),
),
);
}
}
- 完整代码:
将上述部分组合成一个完整的Flutter应用。
import 'package:flutter/material.dart';
import 'package:flutter_tencentplayer/flutter_tencentplayer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tencent Player Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late TencentPlayerController _controller;
@override
void initState() {
super.initState();
_controller = TencentPlayerController(
vid: '视频ID', // 替换为你的腾讯视频ID
autoPlay: true, // 是否自动播放
muted: false, // 是否静音
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tencent Video Player Example'),
),
body: Center(
child: TencentPlayer(
controller: _controller,
),
),
);
}
}
这个简单的示例展示了如何在Flutter应用中集成flutter_tencentplayer
插件并播放腾讯视频。请注意,你需要将vid
参数替换为实际的腾讯视频ID。此外,根据你的需求,你可能还需要处理更多的播放控制逻辑,比如暂停、恢复、全屏等功能,这些都可以通过TencentPlayerController
提供的API来实现。
希望这个示例对你有所帮助!