服务端 API 文档

超级播放器

最近更新时间:2021-08-09 19:18:23

腾讯云视立方 Flutter 超级播放器是腾讯云开源的一款播放器组件,简单几行代码即可拥有类似腾讯视频强大的播放功能。包括横竖屏切换、清晰度选择、手势、小窗等基础功能,还支持视频缓存,软硬解切换,倍速播放等特殊功能。相比系统播放器,支持格式更多,兼容性更好,功能更强大。同时还支持直播流(flv + rtmp)播放,具备首屏秒开、低延迟的优点,清晰度无缝切换、直播时移等高级能力。

本播放器基于 SuperPlayer 的一个 Flutter 插件,同时支持 Android 和 iOS 两个平台。完全免费开源,不对播放地址来源做限制,可放心使用。

SDK下载

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

阅读对象

本文档部分内容为腾讯云专属能力,使用前请开通 腾讯云 相关服务,未注册用户可注册账号 免费试用

集成指引

  1. pubspec.yaml中增加配置。

      super_player:
        git:
          url: https://github.com/tencentyun/SuperPlayer
          path: Flutter

  2. 更新依赖包。

       flutter pub upgrade

  3. 添加原生配置。

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" />

Android 依赖原生播放器 SDK,把目录下example/android/superplayerkit文件夹复制到你的工程目录下,在setings.gradle 插入 include ':superplayerkit',当然,您也可以在官网搜索合适版本进行导入。

iOS 配置

在 iOS 的Info.plist中增加如下配置:

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

iOS原生采用pod方式进行依赖,编辑podfile文件,指定你的播放器版本。

pod 'SuperPlayer/Player', '3.3.9'

如果不指定版本,默认会安装最新的SuperPlayer

Flutter 中调用

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

class TestSuperPlayer extends StatefulWidget {
  @override
  _TestSuperPlayerState createState() => _TestSuperPlayerState();
}

class _TestSuperPlayerState extends State<TestSuperPlayer> {

  SuperPlayerViewConfig _playerConfig;
  SuperPlayerViewModel _playerModel;
  SuperPlayerPlatformViewController _playerController;
  String _url = "http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid_demo1080p.flv";
  int _appId = 0;
  String _fileId = "";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _playerConfig = SuperPlayerViewConfig();
    _playerModel = SuperPlayerViewModel();
    _playerModel.videoURL = _url;
  }

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            ackgroundColor: Colors.blueGrey,
            title: const Text('SuperPlayer'),
        ),
        body: Builder(
        builder: (context) =>
        SafeArea(
            child: Container(
            color: Colors.blueGrey,
            child: Column(
                children: [
                AspectRatio(
                    aspectRatio: 16.0/9.0,
                    child:SuperPlayerVideo(
                        onCreated: (SuperPlayerPlatformViewController vc) {
                            _playerController = vc;
                            await _playerController.setPlayConfig(_playerConfig);
                            await _playerController.playWithModel(_playerModel);// 开始播放
                        },
                    )
                ),
                ],
            ),
            ),
        )
        ),
    );
  }

使用播放器

播放器主类为 SuperPlayerVideo,创建后即可播放视频。

  void initState() {
    // TODO: implement initState
    super.initState();
    _playerConfig = SuperPlayerViewConfig();
    _playerModel = SuperPlayerViewModel();
    _playerModel.videoURL = _url;
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            ackgroundColor: Colors.blueGrey,
            title: const Text('SuperPlayer'),
        ),
        body: Builder(
            builder: (context) =>
                SafeArea(
                    child: Container(
                        color: Colors.blueGrey,
                        child: Column(
                            children: [
                                AspectRatio(
                                    aspectRatio: 16.0/9.0,
                                    child:SuperPlayerVideo(
                                        onCreated: (SuperPlayerPlatformViewController vc) {
                                            _playerController = vc;
                                            await _playerController.setPlayConfig(_playerConfig);
                                            await _playerController.playWithModel(_playerModel);// 开始播放
                                        },
                                    )
                                ),
                            ],
                        ),
                    ),
                )
        ),
    );
  }

运行代码,可以看到视频在手机上播放,并且界面上大部分功能都处于可用状态。

多清晰度

上面的示例代码只有一种清晰度,如果要添加多个清晰度,也非常简单。以直播为例,打开 直播控制台,找到需要播放的直播流,进入详情。

这里有不同清晰度、不同格式的播放地址。推荐使用 FLV 地址播放,代码如下

  void initState() {
    // TODO: implement initState
    super.initState();
    _playerConfig = SuperPlayerViewConfig();
    _playerModel = SuperPlayerViewModel();
    SuperPlayerUrl url1 = SuperPlayerUrl();
    url1.title = "超清";
    url1.url = "http://5815.liveplay.myqcloud.com/live/5815_89aad37e06ff11e892905cb9018cf0d4.flv";

    SuperPlayerUrl url2 = SuperPlayerUrl();
    url2.title = "超清";
    url2.url = "http://5815.liveplay.myqcloud.com/live/5815_89aad37e06ff11e892905cb9018cf0d4.flv";

    SuperPlayerUrl url3 = SuperPlayerUrl();
    url3.title = "超清";
    url3.url = "http://5815.liveplay.myqcloud.com/live/5815_89aad37e06ff11e892905cb9018cf0d4.flv";

    _playerModel.multiVideoURLs = [url1, url2, url3];
    _playerModel.videoURL = url1.url;// 设置默认播放的清晰度
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blueGrey,
        title: const Text('SuperPlayer'),
      ),
      body: Builder(
        builder: (context) =>
        SafeArea(
          child: Container(
            color: Colors.blueGrey,
            child: Column(
              children: [
                AspectRatio(
                    aspectRatio: 16.0/9.0,
                    child:SuperPlayerVideo(
                      onCreated: (SuperPlayerPlatformViewController vc) async {
                        _playerController = vc;
                        await _playerController.setPlayConfig(_playerConfig);
                        await _playerController.playWithModel(_playerModel);// 开始播放
                      },
                    )
                ),
              ],
            ),
          ),
        )
      ),
    );
  }

在播放器中即可看到这几个清晰度,单击即可立即切换。

时移播放

播放器开启时移非常简单,您只需要在播放前配置好 appId。

SuperPlayerViewModel playModel = SuperPlayerViewModel();
playModel.appId = 1252463788;// 这里换成您的 appID

说明:

appId 在【腾讯云控制台】>【账号信息】中查看。

播放的直播流就能在下面看到进度条。往后拖动即可回到指定位置,单击【返回直播】可观看最新直播流。

说明:

时移功能处于公测申请阶段,如您需要可 提交工单 申请使用。

FileId 播放

设置清晰度除了填写 url 外,更简单的使用方式是采用 fileId 播放。fileId 一般是在视频上传后,由服务器返回:

  1. 客户端视频发布后,服务器会返回 fileId 到客户端。
  2. 服务端视频上传,在 确认上传 的通知中包含对应的 fileId。

如果文件已存在腾讯云,则可以进入 媒资管理 ,找到对应的文件。单击后在右侧视频详情中,可以看到 appId 和 fileId。

播放 fileId 的代码如下:

SuperPlayerViewModel playModel = SuperPlayerViewModel();
playModel.appId = 1252463788;// 这里换成您的 appID
SuperPlayerVideoId videoId = SuperPlayerVideoId();
videoId.fileId = "4564972819219071679";
playModel.videoId = videoId;

_playerController.playWithModel(playModel);

视频在上传后,后台会自动转码(所有转码格式请参见 转码模板)。转码完成后,播放器会自动显示多个清晰度。

更多功能

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

目录