腾讯云音视频播放器又上新啦！短视频秒开组件、加密画中画等功能让音视频播放更专业！
原创腾讯云音视频播放器又上新啦！短视频秒开组件、加密画中画等功能让音视频播放更专业！
原创
目录
- 前言
- 腾讯云音视频播放器
- 快速使用指南
- 关于License
- 短视频秒开组件接入教程
- 高级画中画组件接入教程
- 最后
- 参考文献
前言
现在是数字化快速发展的时代，音视频已经成为一种广受欢迎的沟通和传播方式，以至于有一种说法是音视频将终结内容为王的时代，音视频是人们最后的交流方式。随着越来越多的音视频软件的诞生和推广，以及人们的生活方式转变，音视频成为大家日常生活的一部分，这也让音视频技术有了更加快速的发展前景。与此同时，腾讯云音视频一直走在行业的最前类，致力于音视频相关的技术解决方案，为开发者和企业提供了稳定、高效的音视频相关服务，而且音视频技术不断更新和迭代，满足市场上各种使用场景。那么本文就来分享一下关于腾讯云音视频播放器新品的使用体验，教大家如何快速接入相关的新功能，让音视频播放器有更上一层楼的功能和效果。
腾讯云音视频播放器
根据腾讯云音视频官方的消息显示，播放器SDK是音视频终端SDK的子产品之一，它采用“腾讯视频”同款播放内核，经过内部业务长期优化和海量服务验证，对比系统播放器性能可提升20%-50%，同时具备“臻彩视听”、精准Seek、画中画等丰富功能，为用户提供直播、点播场景下流畅稳定的音视频播放能力，覆盖泛娱乐、电商、教育等多样化音视频业务场景，支持Web/H5、iOS、Android、Flutter平台。
据我所知，就在最近，播放器SDK在原有功能的基础之上，新增短视频秒开组件、高级画中画组件、VR播放组件等高级功能，为使用者提供更专业的音视频播放能力。本文只对这些高级功能的短视频秒开组件、高级画中画组件进行体验和使用介绍，其他新增功能，感兴趣的读者可以自行去腾讯云音视频播放器官方文档查阅学习即可，这里不再做过多赘述。传送门：/document/product/881/96700
快速使用指南
在接入腾讯云音视频播放器之前，如果第一次使用首先需要注册腾讯云账号，并开通对应的服务，由于腾讯云音视频有很多不错的服务，这里只拿其中一个服务来做例子使用，即腾讯云云点播，因为使用视频秒开和高级画中画要用到这个服务。具体的准备工作如下所示：
1、注册腾讯云账号非常简单，只需按照指引填写相关信息即可，注册成功之后需要进行实名认证，注册腾讯云：/register
2、注册腾讯云账号之后需要去实名认证，实名认证指引：/document/product/378/10495
3、实名认证完成之后就是去开通对应的腾讯云云点播服务，直接进入腾讯云云点播服务开通页面，勾选同意《腾讯云服务协议》并单击开通云点播服务，云点播服务开通页：/product/vod，然后根据实际需要进行开通对应的服务，如下图所示：
4、其实，腾讯云音视频会不定期更新活动，尤其是新户使用力度会更大，所以不必担心费用问题，但是一切以实际页面显示的结果为准。另外腾讯云音视频也提供了免费的体验功能，所以这里我使用领取云点播免费资源的步骤如下所示：
打开腾讯云点播控制台，直接申请创建应用即可，如下图所示：
创建云点播应用，如下所示：
关于License
由于播放器 SDK 提供直播播放和点播播放能力，移动端和 Web 端各自分开独立授权计费，所以在使用之前需要获取对应 License 后方可使用对应功能，这里以移动端的使用来分享。License 获取和使用方式如下：
1、购买 License
您可参考 产品功能 和 价格总览 确认并购买需要的 License。若需要申请测试 License 进行体验，可参见 免费测试 指引。
2、绑定 License
购买完 License 后，需要将新购的 License 与需要授权的应用/域名进行绑定，以实现对应的应用/域名的授权。移动端以应用包名为单位授权，Web 端以域名为单位授权，移动端绑定操作 和 Web 端绑定操作 指引见下文。创建license如下所示：
3、配置 License
完成绑定后将在视立方控制台获得授权凭证 License URL 和 License Key，需要在集成 SDK 的过程中需传入对应信息，请妥善保管。如下所示：
短视频秒开组件接入教程
由于web端不涉及短视频秒开的功能，这里以移动端的使用来讲，又由于画中画功能目前只支持iOS端，所以高级画中画也以iOS端来分享。
1、组件简介
再来看一下秒开组件的详细简介，TUIPlayerShortVideo 组件是腾讯云推出的一款性能优异，支持视频极速首帧和流畅滑动，提供优质播放体验的短视频组件，独特的优势如下所示：
- 首帧秒开：首帧时间是短视频类应用核心指标之一，直接影响用户的观看体验。短视频组件通过预播放、预下载、播放器复用和精准流量控制等技术，实现极速首帧、滑动丝滑的优质播放体验，从而提升用户播放量和停留时长。
- 优异的性能：通过播放器复用和加载策略的优化，在保证极佳流畅度的同时，始终让内存和 CPU 消耗保持在较低的水平。
- 快速集成：组件对复杂的播放操作进行了封装，提供默认的播放 UI，同时支持 FileId 和 URL 播放，可低成本快速集成到您的项目中。
2、TUIPlayerKit 下载
关于相关插件的下载，主要是关于 TUIPlayerKit SDK 和 Demo 可 单击这里 下载即可。在集成使用的时候，需要下载的依赖有很多，所以大家在使用的时候一定要全部下载，千万别漏了，不然就不能正常使用。具体步骤如下所示：
a.依赖库
关于TUIPlayerShortVideo 依赖的 SDK 有：
- TUIPlayerCore
- TXLiteAVSDK >= 11.4
- SDWebImage
- Masonry
b. 环境要求
关于使用环境要求，具体如下所示：
- 系统版本：>= iOS 9.0
- 开发环境：>= Xcode 14.0 ( 推荐使用最新版本)
c. 集成 TUIPlayerCore
在集成TUIPlayerCore的时候，需要解压下载的 TUIPlayerKit 资源包，将 TUIPlayerCore.xcframework 组件 SDK 添加到你的项?中 Xcode Project 的合适位置并选择合适的 target，同时勾选 Do Not Embed 。
d. 集成 TUIPlayerShortVideo
在集成TUIPlayerShortVideo的时候，需要解压下载的 TUIPlayerKit 资源包，将 TUIPlayerShortVideo.xcframework 组件 SDK 添加到你的项?中 Xcode Project 的合适位置并选择合适的 target，同时勾选 Do Not Embed 。
e. 集成 TXLiteAVSDK
关于TXLiteAVSDK 集成方法请参见 TXLiteAVSDK 集成指引，这里不再过多介绍。
f. 集成 SDWebImage
关于SDWebImage 的下载和集成请参见 GitHub 指引，这里也不再过多说明。
g. 集成 Masonry
关于Masonry 的下载和集成请参见 GitHub 指引，也不再过多说明。
3、核心功能具体使用介绍
上面关于使用前的集成之后，那么接下来就是重点，即核心功能的使用操作，主要从6个地方来介绍。
a. 配置播放器高级版 Licence
在获取对应 的License，可以直接前往 腾讯云视立方控制台 > License 管理 > 移动端 License 获取对应 LicenseURL 和 LicenseKey，但是如果没有申请移动端播放器高级版 License，将会出现视频播放失败、黑屏等现象。上面介绍了关于License的申请，这里就不再过多说明。
调用相关功能之前，需要在项目中配置 Licence，引用 TUIPlayerCore 模块建议在 - [AppDelegate application:didFinishLaunchingWithOptions:] 中，做如下配置：
NSString * const licenceURL = @"https://license.vod2.myqcloud.com/license/v2/11/v_cube.license";
NSString * const licenceKey = @"942054db7c3bc218d8809f67e";
TUIPlayerConfig *config = [TUIPlayerConfig new];
config.licenseUrl = licenceURL;
config.licenseKey = licenceKey;
[[TUIPlayerCore shareInstance] setPlayerConfig:config];b. 播放
将 TUIShortVideoView 的实例添加到想要呈现的 View 上，具体如下代码：
TUIShortVideoView *videoView = [[TUIShortVideoView alloc] init];
videoView.frame = self.view.bounds;
videoView.delegate = self;
[self.view addSubview:self.videoView];然后添加视频数组：
NSArray *videos1 = @[第1组视频数据]；
[self.videoView setShortVideoModels:videos1];第一组视频播放完之后，还需要在 TUIShortVideoViewDelegate 的代理方法内继续拼入第二组视频数据：
NSArray *videos2 = @[第2组视频数据]；
-(void)onReachLast {
///这里可以做数据index索引记录，继续拼入第 3 4 5 6....组数据
[self.videoView appendShortVideoModels:videos2];
}c. 分辨率设置
当前正在播放的视频支持的码率，如下所示：
NSArray<TUIPlayerBitrateItem *>array = [self.videoView currentPlayerSupportedBitrates];获取当前正在播放的码率索引，如下所示：
NSInteger bitrateIndex = [self.videoView bitrateIndex];然后是切换分辨率，具体如下所示：
///1、 切换列表内所有的视频的分辨率到1080
[self.videoView switchResolution:1080*1920 index:-1];
/// 2、切换当前正在播放的视频的分辨率到1080
[self.videoView switchResolution:1080*1920 index:-2];
///3、 切换索引为4的视频的分辨率到1080
[self.videoView switchResolution:1080*1920 index:4];d. 全局配置
可以通过 TUIPlayerConfig 模型在 TUIPlayerCore 里设置一些全局配置，具体的TUIPlayerConfig 主要参数参见下表所示：
参数名 | 含义 |
|---|---|
licenseUrl | Licence 的 Url |
licenseKey | Licence 的 key |
enableLog | 是否允许打印日志，默认 NO |
然后通过 TUIPlayerCore 进行全局配置，具体如下所示：
TUIPlayerConfig *config = [TUIPlayerConfig new];
config.enableLog = YES;
[[TUIPlayerCore shareInstance] setPlayerConfig:config];e. 播放器策略配置
可以通过 TUIPlayerStrategyModel 模型在配置播放器的策略，具体的TUIPlayerStrategyModel 主要参数参见下表所示：
参数名 | 含义 |
|---|---|
preloadCount | 缓存个数，默认3 |
preloadBufferSizeInMB | 缓存大小，单位 MB，默认1MB |
isPreVideoResume | 是否需要预播放（preload 完成后），默认 NO |
preferredResolution | 偏好分辨率，默认720 *?1280 |
progressInterval | 进度条回调间隔时长，单位毫秒，默认500ms |
renderMode | 画布填充样式，默认图像适应屏幕，保持画面完整 |
extInfoMap | 额外参数，预留 |
enableAutoBitrate | 是否开启自适应码率，默认NO |
mediaType | 设置媒资类型 |
然后进行播放器策略配置，具体如下所示：
TUIPlayerStrategyModel *strategyModel = [[TUIPlayerStrategyModel alloc] init];
strategyModel.isPreVideoResume = YES;
[_videoView setShortVideoStrategyModel:strategyModel];f. 播放模块
另外，播放模块主要是通过 TUIShortVideoView 来呈现，具体的接口如下所示：
参数名 | 含义 |
|---|---|
isAutoPlay | 首次加载是否自动播放第一个视频,默认YES |
videos | 只读属性，获取当前存在与视频列表中的数据 |
currentVideoModel | 当前正在播放的视频模型 |
currentVideoIndex | 当前正在播放的视频索引 |
currentPlayerStatus | 当前播放器的播放状态 |
isPlaying | 当前播放器是否正在播放 |
delegate | 代理 |
refreshControl | 设置下拉刷新控件 |
initWithUIManager | 初始化（带自定义UI） |
setShortVideoStrategyModel | 您也可以通过这个接口设置播放器的播放策略，同 TUIPlayerStrategyManager 一样 |
setShortVideoModels | 首次设置数据源 |
appendShortVideoModels | 追加视频数据源 |
removeAllVideoModels | 删除所有视频数据 |
setPlaymode | 视频播放模式，单个循环或列表循环，默认前者 |
pause | 暂停 |
resume | 继续播放 |
destoryPlayer | 销毁播放器 |
didScrollToCellWithIndex | 跳到指定索引的视频 |
startLoading | 展示 loading 图 |
stopLoading | 隐藏 loading 图 |
currentPlayerSupportedBitrates | 当前正在播放的视频支持的码率 |
bitrateIndex | 获取当前正在播放的码率索引 |
switchResolution:index: | 切换分辨率 |
g. 自定义 UI 图层
最后再来分享一下关于自定义UI图层的使用，其实TUIPlayerShortVideo 组件内置了一套 UI 控件，包括背景图、loading 加载图、进度条、时间等，我们可以通过 TUIPlayerShortVideoUIManager 去实现自定义 UI，具体代码如下所示：
TUIPlayerShortVideoUIManager *uiManager = [[TUIPlayerShortVideoUIManager alloc] init];
[uiManager setControlViewClass: TUIPSControlView.class];
[uiManager setLoadingView:[[TUIPSLoadingView alloc] init]];
[uiManager setBackgroundView:[UIView new]];
_videoView = [[TUIShortVideoView alloc] initWithUIManager:uiManager];上面的代码，通过 TUIPlayerShortVideoUIManager 自定义了视频控制层（如进度条，时间等），以及loading 加载控件。
截止这里，关于短视频秒开组件接入使用就介绍到这里，但是需要说明一下，这里只是对腾讯云音视频播放器新增的短视频秒开组件的部分使用体验，也不完整，所以如果大家想要深度去学习和使用，还请移步腾讯云音视频播放器官方文档查阅学习。另外，由于实验局限性没有做对比实验效果，但是体验之后可以知道的是经过优化后的短视频，可以达到无感起播的体验，播放流畅丝滑，起播平均时长10-30毫秒。
高级画中画组件接入教程
上文也提到了由于web端不涉及短视频秒开的功能，这里以移动端的使用来讲，而且腾讯云音视频播放器的画中画功能目前只支持iOS端，所以这里还是以iOS端的具体使用来分享。
1、组件简介
根据腾讯云音视频播放器官方显示，高级画中画是在原有的 基础画中画 上进行的升级，主要支持加密视频画中画、离线播放画中画、从前台无缝切换到画中画的场景，优化了实现方式和逻辑，无需长时间等待，实现真正意义的“秒切”效果，高级画中画独特的优势如下所示：
- 加密视频画中画：和现有播放器加密播放完美结合，实现基于加密模板的视频画中画播放，无需切换播放器类型。
- 离线播放画中画：支持本地视频画中画播放，包含普通视频、加密视频等。
- “秒切”效果：无需点击切换画中画按钮，退后台即可立马启动画中画，实现真正意义的“秒切”。
2、环境要求
关于使用的环境要求，具体如下所示：
- 系统版本：iOS >= 14.0、iPad >= 9.0
- 硬件设备：iPhone 8及以上的设备
- SDK 版本：11.4版本及以上
3、集成步骤
在集成的时候，需要升级版本及配置资源，具体步骤如下所示：
a. 升级 SDK 版本
在开始使用高级画中画的时候，需要 SDK 配合使用，使用高级画中画版本功能前需要将 SDK 的版本升级到11.3及以上的高级版本 或 11.4及以上的基础版本，不然无法使用。而且基础画中画 版本和高级画中画版本两者可以兼容性的存在，不会存在功能性冲突。升级 SDK 版本步骤请去SDK 集成指引中查阅使用，这里不再过多说明。
b.引入 bundle 资源
由于腾讯云音视频播放器的SDK 内需要使用 TXVodPlayer.bundle 里的资源，所以需在编译之前将 bundle 文件 下载 引入到项目中，需要注意的是切勿修改 bundle 及其内部使用的资源名称，否则会导致无缝切换画中画失败，具体操作如下所示：
c. 开通播放器高级版 Licence
使用高级画中画版本的时候，还需要使用移动端播放器高级版 License，上文以及介绍了关于licence的申请介绍，这里不再说明，但是需要注意的是如果没有申请 Player 高级套餐 License，进入画中画将无效，所以一点更要先去申请licence。
在获取到 License 信息后，直接在调用 SDK 的相关接口前，通过下面的接口初始化 License，这里建议在 - [AppDelegate application:didFinishLaunchingWithOptions:] 方法中进行如下设置：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
NSString * const licenceURL = @"https://license.vod2.myqcloud.com/license/v2/11/v_cube.license";
NSString * const licenceKey = @"942054db7c3bc218d8809f67e";
//TXLiveBase 位于 "TXLiveBase.h" 头文件中
[TXLiveBase setLicenceURL:licenceURL key:licenceKey];
NSLog(@"SDK Version = %@", [TXLiveBase getSDKVersionStr]);
}d.画中画功能快速接入的权限开通
由于画中画在 iOS 9 就已经推出了，不过之前都只能在 iPad 上使用，所以iPhone 要使用画中画需更新到 iOS 14 才能使用，目前腾讯云播放器可以支持应用内和应用外画中画能力，在使用前需要开通后台模式，具体操作步骤为：找到XCode 选择对应的 Target > Signing & Capabilities > Background Modes，勾选 “Audio, AirPlay, and Picture in Picture”，具体如下图所示：
e. 设置配置选项
在使用自动画中画功能之前，还需要在设置中打开自动开启画中画按钮，具体路径为 iPhone 或 iPad本机上进行选择：设置 > 通用 > 画中画 > 自动开启画中画，选择打开即可，具体如下所示：
f. 设置代理
为了方便监听画中画的状态，还需要设置 vodDelegate，实现 TXVodPlayListener 中的画中画相关回调，可以根据回调里的各种状态和错误信息，进行相关的业务操作，比如：继续播放、暂停或退出画中画等操作，具体如下所示：
/**
* 画中画状态回调
*/
- (void)onPlayer:(TXVodPlayer *)player pictureInPictureStateDidChange:(TX_VOD_PLAYER_PIP_STATE)pipState withParam:(NSDictionary *)param;
/**
* 画中画错误信息回调
*/
- (void)onPlayer:(TXVodPlayer *)player pictureInPictureErrorDidOccur:(TX_VOD_PLAYER_PIP_ERROR_TYPE)errorType withParam:(NSDictionary *)param;g. 使用画中画能力代码示例
接下来把整个画中画的使用核心代码分享出来，具体分为4步操作，具体如下所示：
// 1.播放之前先设置“自动切换 Picture-In-Picture功能”是否允许
// YES 表示允许 NO 表示不允许，默认为NO
[TXVodPlayer setPictureInPictureSeamlessEnabled:YES];
// 2、进入画中画
if (![TXVodPlayer isSupportPictureInPicture]) {
// 设备不支持画中画直接退出
return;
}
// 手动调用进入画中画
[_vodPlayer enterPictureInPicture];
// 3、退后台操作 如果设备支持无缝切换画中画，退后台不暂停播放。
// 注意：isSupportSeamlessPictureInPicture这个接口，需要在应用程序加载高级版License以后才能使用。同时，此接口只能判断设备本身
// 是否支持自动切换画中画，因系统限制，无法判断用户对于自动画中画的设置权限，需自行引导。
if ([self.vodplayer isSupportSeamlessPictureInPicture]) {
// 不做处理
} else {
// 暂停播放
[self.vodplayer pause];
}
// 4.退出画中画
[_vodPlayer exitPictureInPicture];h.注意事项
使用画中画需要注意以下几点：
- 使用自动画中画功能一定要确保播放器处于播放状态，如果播放器是暂停或停止状态时，无法使用自动画中画功能。
- 关于isSupportSeamlessPictureInPicture 这个接口，需要在应用程序加载高级版 License 以后才能使用，而且这个接口只能判断设备本身是否支持自动切换画中画，因系统限制，无法判断用户对于自动画中画的设置权限，需自行引导。
- 播放之前先设置是否允许“自动切换画中画功能”。
最后
通过本文的分享介绍，关于腾讯云音视频播放器部分新特性的使用教程，应该读者都学会了如何快速接入使用短视频秒开组件、加密画中画等功能，而且腾讯云音视频服务的强大功能和稳定性，给开发者和使用者提供了非常棒的应用体验。无论是个人开发者还是企业用户，通过使用腾讯云音视频服务，都能够轻松实现高质量的音视频应用。同时也希望本文对你在音视频播放器的使用接入方面有所帮助，快来尝试腾讯云音视频播放器的新功能吧！
参考文献
腾讯云音视频播放器官方文档：/document/product/881/96686
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。