超级播放器

最后更新时间:2021-09-01 10:11:14

    腾讯云视立方 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
      
    1. 更新依赖包。

        flutter pub upgrade
      
    2. 添加原生配置。

    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。