播放器 SDK

动态与公告

产品简介

购买指南

License 指引

快速入门

Demo 体验

SDK 下载

Web 端集成

iOS 端集成

Android 端集成

Flutter 端集成

高级功能

常见问题

SDK 隐私协议

联系我们

词汇表
文档中心 > 播放器 SDK > Flutter 端集成 > 超级播放器

超级播放器

最近更新时间：2022-05-31 16:39:21

前往 GitHub 编辑 我的收藏

本页目录：

腾讯云视立方 Flutter 超级播放器是腾讯云开源的一款播放器组件，简单几行代码即可拥有类似腾讯视频强大的播放功能。包括横竖屏切换、清晰度选择、手势、小窗等基础功能，还支持视频缓存，软硬解切换，倍速播放等特殊功能。相比系统播放器，支持格式更多，兼容性更好，功能更强大。同时还支持直播流（FLV + RTMP）播放，具备首屏秒开、低延迟的优点，清晰度无缝切换、直播时移等高级能力。
本播放器基于 SuperPlayer 的一个 Flutter 插件，同时支持 Android 和 iOS 两个平台。完全免费开源，不对播放地址来源做限制，可放心使用。

SDK 下载

腾讯云视立方 Flutter 超级播放器项目的地址是 SuperPlayer Flutter。

项目简介

腾讯云视立方·播放器 SDK 是音视频终端 SDK（腾讯云视立方）的子产品 SDK 之一，基于腾讯云强大的后台能力与 AI 技术，提供视频点播和直播播放能力的强大播放载体。结合腾讯云点播或云直播使用，可以快速体验流畅稳定的播放性能。充分覆盖多类应用场景，满足客户多样需求，让客户轻松聚焦于业务发展本身，畅享极速高清播放新体验。

此项目提供了点播播放器和直播播放器 SDK，您可以基于播放器搭建自己的播放业务：

  • 点播播放器 SDK：TXVodPlayerController对 Android 和 iOS 两个平台的点播播放器 SDK 进行接口封装， 你可以通过集成TXVodPlayerController进行点播播放业务开发。详细使用例子可以参见DemoTXVodPlayer。

  • 直播播放器 SDK：TXLivePlayerController对 Android 和 iOS 两个平台的直播播放器 SDK 进行接口封装， 你可以通过集成TXLivePlayerController进行直播播放业务开发。详细使用例子可以参见DemoTXLivePlayer。

为了减少接入成本， 在 example 里提供了超级播放器组件（带 UI 的播放器），基于超级播放器简单的几行代码就可以搭建视频播放业务。您可以根据自己项目的需求， 把超级播放器的相关代码应用到项目中去，根据需求进行调整 UI 和交互细节。

  • 超级播放器组件：SuperPlayerController 超级播放器组件，对点播和直播 SDK 进行了二次封装，可以方便你快速简单集成。目前是 Beta 版本，功能还在完善中。详细使用例子可以参见DemoSuperplayer。

快速集成

pubspec.yaml 配置

  1. 集成 LiteAVSDK_Player 版本，默认情况下也是集成此版本。在pubspec.yaml中增加配置：
    super_player:
  git:
    url: https://github.com/tencentyun/SuperPlayer
    path: Flutter
  2. 如果要集成 LiteAVSDK_Professional 版本，则pubspec.yaml中配置改为：
    super_player:
  git:
    url: https://github.com/tencentyun/SuperPlayer
    path: Flutter
    ref: Professional
  3. 更新依赖包：
    flutter packages get

添加原生配置

Android 配置

在 Android 的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" />

iOS 配置

  1. 在 iOS 的Info.plist中增加如下配置：
    <key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
  2. iOS 原生采用pod方式进行依赖，编辑podfile文件，指定你的播放器 SDK 版本，默认集成的是 Player 版SDK。
    pod 'TXLiteAVSDK_Player'            //Player版
  3. Professional 版 SDK 集成：
    pod 'TXLiteAVSDK_Professional'     //Professional版

如果不指定版本，默认会安装最新的TXLiteAVSDK_Player最新版本。

集成过程中常见问题

  • 执行flutter doctor命令检查运行环境，知道出现”No issues found!“。
  • 执行flutter pub get确保所有依赖的组件都已更新成功。

申请视频播放能力 License 和集成

若您已获得相关 License 授权，需在 腾讯云视立方控制台 获取 License URL 和 License Key：

若您暂未获得 License 授权，需先参见 视频播放License 获取相关授权。

集成播放器前，需要 注册腾讯云账户，注册成功后申请视频播放能力 License， 然后通过下面方式集成，建议在应用启动时进行。

如果没有集成 License，播放过程中可能会出现异常。

String licenceURL = ""; // 获取到的 licence url
String licenceKey = ""; // 获取到的 licence key
SuperPlayerPlugin.setGlobalLicense(licenceURL, licenceKey);

点播播放器使用

点播播放器核心类TXVodPlayerController，详细 Demo 可参见DemoTXVodPlayer。

import 'package:flutter/material.dart';
import 'package:super_player/super_player.dart';

class Test extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TestState();
}

class _TestState extends State<Test> {
  late TXVodPlayerController _controller;

  double _aspectRatio = 16.0 / 9.0;
  String _url =
          "http://1400329073.vod2.myqcloud.com/d62d88a7vodtranscq1400329073/59c68fe75285890800381567412/adp.10.m3u8";

  @override
  void initState() {
    super.initState();
    String licenceUrl = ""; // 获取到的 licence url
    String licenseKey = ""; // 获取到的 licence key
    SuperPlayerPlugin.setGlobalLicense(licenceUrl, licenseKey);
    _controller = TXVodPlayerController();
    initPlayer();
  }

  Future<void> initPlayer() async {
    await _controller.initialize();
    await _controller.startPlay(_url);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
            height: 220,
            color: Colors.black,
            child: AspectRatio(aspectRatio: _aspectRatio, child: TXPlayerVideo(controller: _controller)));
  }
}

超级播放器使用

超级播放器核心类SuperPlayerVideo，创建后即可播放视频。

import 'package:flutter/material.dart';
import 'package:super_player/super_player.dart';

/// flutter superplayer demo
class DemoSuperplayer extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DemoSuperplayerState();
}

class _DemoSuperplayerState extends State<DemoSuperplayer> {
  List<SuperPlayerModel> videoModels = [];
  bool _isFullScreen = false;
  SuperPlayerController _controller;

  @override
  void initState() {
    super.initState();
    String licenceUrl = "填入您购买的 license 的 url";
    String licenseKey = "填入您购买的 license 的 key";
    SuperPlayerPlugin.setGlobalLicense(licenceUrl, licenseKey);
    _controller = SuperPlayerController(context);
    FTXVodPlayConfig config = FTXVodPlayConfig();
    config.preferredResolution = 720 * 1280;
    _controller.setPlayConfig(config);
    _controller.onSimplePlayerEventBroadcast.listen((event) {
      String evtName = event["event"];
      if (evtName == SuperPlayerViewEvent.onStartFullScreenPlay) {
        setState(() {
          _isFullScreen = true;
        });
      } else if (evtName == SuperPlayerViewEvent.onStopFullScreenPlay) {
        setState(() {
          _isFullScreen = false;
        });
      } else {
        print(evtName);
      }
    });
    initData();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Container(
          child: Scaffold(
            backgroundColor: Colors.transparent,
            appBar: _isFullScreen
                ? null
                : AppBar(
                    backgroundColor: Colors.transparent,
                    title: const Text('SuperPlayer'),
                  ),
            body: SafeArea(
              child: Builder(
                builder: (context) => getBody(),
              ),
            ),
          ),
        ),
        onWillPop: onWillPop);
  }

  Future<bool> onWillPop() async {
    return !_controller.onBackPress();
  }

  Widget getBody() {
    return Column(
      children: [_getPlayArea()],
    );
  }

  Widget _getPlayArea() {
    return SuperPlayerView(_controller);
  }

  Widget _getListArea() {
    return Container(
      margin: EdgeInsets.only(top: 10),
      child: ListView.builder(
        itemCount: videoModels.length,
        itemBuilder: (context, i) => _buildVideoItem(videoModels[i]),
      ),
    );
  }

  Widget _buildVideoItem(SuperPlayerModel playModel) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ListTile(
            leading: Image.network(playModel.coverUrl),
            title: new Text(
              playModel.title,
              style: TextStyle(color: Colors.white),
            ),
            onTap: () => playCurrentModel(playModel)),
        Divider()
      ],
    );
  }

  void playCurrentModel(SuperPlayerModel model) {
    _controller.playWithModel(model);
  }

  void initData() async {
    SuperPlayerModel model = SuperPlayerModel();
    model.videoURL = "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/48d0f1f9387702299774251236/gZyqjgaZmnwA.m4v";
    model.playAction = SuperPlayerModel.PLAY_ACTION_AUTO_PLAY;
    model.title = "腾讯云音视频";
    _controller.playWithModel(model);
  }
}

深度定制开发指引

腾讯云播放器 SDK Flutter 插件对原生播放器能力进行了封装， 如果您要进行深度定制开发，建议采用如下方法：

  • 基于点播播放器SDK，接口类为TXVodPlayerController 或直播播放器 SDK，接口类为TXLivePlayerController，进行定制开发，项目中提供了定制开发 Demo，可参见 example 工程里的DemoTXVodPlayer和DemoTXLivePlayer。

  • 超级播放器组件SuperPlayerController 对播放器 SDK 进行了封装，同时提供了简单的 UI 交互， 由于此部分代码在 example 目录。如果您有对超级播放器组件定制化的需求，您可以进行如下操作：

    把超级播放器组件相关的代码，代码目录：exmple/lib/superplayer，复制到您的项目中，进行定制化开发。

更多功能

完整功能可扫码下载视频云工具包体验，或直接运行工程 Demo。

目录
中国站