Flutter腾讯视频播放插件flutter_tencentplayer的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter腾讯视频播放插件flutter_tencentplayer的使用

作者其他文章推荐:

正文:

线上项目应用运行效果:

点击这里查看线上项目应用运行效果

demo apk:

点击这里下载demo apk

demo功能:

图片

0.Tip

  1. 必须真机
  2. 打包事项: 见文章底部

1.Setup

flutter_tencentplayer: ${last_version}

或

flutter_tencentplayer:
    git:
      url: https://github.com/qq326646683/flutter_tencentplayer.git

For Android

  1. 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"
        }
    }
}
  1. 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. 打包注意事项

  1. flutter打包命令: flutter build apk --release
  2. 混淆配置:
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

1 回复

更多关于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

  1. 导入包

在你的Dart文件中导入flutter_tencentplayer包。

import 'package:flutter/material.dart';
import 'package:flutter_tencentplayer/flutter_tencentplayer.dart';
  1. 创建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();
  }
  1. 构建UI

使用TencentPlayer小部件来显示视频播放器。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tencent Video Player Example'),
      ),
      body: Center(
        child: TencentPlayer(
          controller: _controller,
        ),
      ),
    );
  }
}
  1. 完整代码

将上述部分组合成一个完整的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来实现。

希望这个示例对你有所帮助!

回到顶部