更新记录

6.1.1(2024-03-02)

  1. 新增屏幕管理功能(内测);

6.1.0(2024-02-07)

  1. 新增V2版本播放器(内测);

5.0.0(2022-03-04)

  1. 升级uniapp基础库至3.3.10;
查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 14.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:9 - 17

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


腾讯云直播播放器

该模块可以实现腾讯云直播拉流播放,支持画面调整、播放控制、消息接收、屏幕截图、截流录制等。

接口模式(纯API)

扫描下方二维码,安装示例代码,快速体验插件功能:

Android iOS 联系我们
Android示例代码 iOS示例代码 技术支持

扫码添加技术支持(微信号: ruanyunkeji006),开通测试账号。

技术支持

建议扫码添加我们技术支持,协助接入和测试。

联系我们 微信号 更多功能
联系我们
ruanyunkeji006

fileId下载
fileId播放
直播弹幕、点赞、送礼等
截留录制
清晰切换
直播时移

API 接口文档

使用教程

快速开始

步骤 1: 集成插件

插件名称: RY-TencentPlayer-LivePlayer

  • 加载插件
  1. 使用 自定义基座 ,引入插件;

  2. 新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。

<RY-TencentPlayer-LivePlayer ref="livePlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentPlayer-LivePlayer>

说明:

可以通过修改width和height参数值的大小,来修改视频容器的大小。

  • 腾讯云配置

注册或登录腾讯云账号,并开通云直播服务

步骤 2: 开始使用插件

使用 init 函数可以初始化插件,需要经过初始化之后,才可以使用各个函数接口功能。

this.$refs.livePlayer.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    console.log(ret);
});

步骤 3: 设置监听

初始化后,可以通过使用 setLivePlayerListener 来设置监听,监听直播播放器的回调事件

this.$refs.livePlayer.setLivePlayerListener({}, ret => {
    console.log(ret);
});

步骤 4: 启动播放

通过 startPlay 函数可以开启直播播放。

this.$refs.livePlayer.startPlay({
    flvUrl: 'http://2157.liveplay.myqcloud.com/live/2157_xxxx.flv',
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    console.log(ret);
});
播放协议 含义
rtmpUrl 传入的 URL 为 RTMP 直播地址
flvUrl 传入的 URL 为 FLV 直播地址
rtmpUrl 低延迟链路地址(仅适合于连麦场景)
hlsUrl 传入的 URL 为 HLS(m3u8) 播放地址

关于 HLS(m3u8)

在 App 上我们不推荐使用 HLS 这种播放协议播放直播视频源(虽然它很适合用来做点播),因为延迟太高,在 App 上推荐使用 FLV 或者 RTMP 播放协议。

步骤 5: 画面调整

  • 大小和位置

修改指定 startPlay 函数的rect参数,可以指定视图的位置和大小。可以通过调整标签的width和height来指定播放容器的大小。

可选值 含义
0 将图像等比例铺满整个屏幕,多余部分裁剪掉,此模式下画面不会留黑边,但可能因为部分区域被裁剪而显示不全
1 将图像等比例缩放,适配最长边,缩放后的宽和高都不会超过显示区域,居中显示,画面可能会留有黑边
可选值 含义
0 正常播放(Home 键在画面正下方)
2 画面顺时针旋转270度(Home 键在画面正左方)

画面调整

步骤 6: 暂停播放

对于直播播放而言,并没有真正意义上的暂停,通过调用 pause,所谓的直播暂停,只是画面冻结和关闭声音,而云端的视频源还在不断地更新着,所以当您调用 resume 的时候,会从最新的时间点开始播放,这跟点播是有很大不同的(点播播放器的暂停和继续与播放本地视频文件时的表现相同)。

this.$refs.livePlayer.pause({}, ret => {
    console.log(ret);
});

this.$refs.livePlayer.resume({}, ret => {
    console.log(ret);
});

步骤 7: 结束播放

stopPlay 结束播放时,会自动销毁播放器视频窗口。

this.$refs.livePlayer.stopPlay({}, ret => {
    console.log(ret);
});

步骤 8: 消息接收

此功能可以在推流端将一些自定义 message 随着音视频线路直接下发到观众端,适用场景例如: (1)冲顶大会:推流端将题目下发到观众端,可以做到“音-画-题”完美同步。 (2)秀场直播:推流端将歌词下发到观众端,可以在播放端实时绘制出歌词特效,因而不受视频编码的降质影响。 (3)在线教育:推流端将激光笔和涂鸦操作下发到观众端,可以在播放端实时地划圈划线。

通过下方方案可以使用这个功能:

  • init 初始化传入 enableMessage 参数,并设置为true
  • 通过 onGetMessageEvt 事件回调监听消息
this.$refs.livePlayer.setLivePlayerListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onGetMessageEvt' == ret.eventType) {
            // 消息处理
            console.log(ret.msg);
        }
    }
})

步骤 9: 屏幕截图

通过调用 snapshot 您可以截取当前直播画面为一帧屏幕,此功能只会截取当前直播流的视频画面,如果您需要截取当前的整个 UI 界面,请调用uniApp的API 来实现。

屏幕截图

腾讯云点播播放器

该播放器可以支持云点播播放,可以支持画面设置、播放控制、屏幕截图、变速播放、本地缓存、预加载、贴片广告、加密播放、HTTP-REF、硬件加速和多码率支持等。

快速开始

步骤 1: 集成插件

插件名称: RY-TencentPlayer-VodPlayer

  • 加载插件
  1. 使用 自定义基座 ,引入插件;

  2. 新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。

<RY-TencentPlayer-VodPlayer ref="vodPlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentPlayer-VodPlayer>

说明:

可以通过修改width和height参数值的大小,来修改视频容器的大小。

  • 开通云点播

注册或登录腾讯云账号,并开通云点播服务

步骤 2: 开始使用插件

插件在使用前,必须使用 init 进行初始化。

this.$refs.vodPlayer.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc'),
}, ret => {
    console.log(ret);
});

步骤 3: 设置监听

通过 setVodPlayerListener 来设置播放器的监听,播放器会返回事件回调

this.$refs.livePlayer.setVodPlayerListener({}, ret => {
    console.log(ret);
});

step 4: 启动播放

vodPlayer支持通过url播放,使用 startPlay 函数来直播播放即可。

this.$refs.vodPlayer.startPlay({
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    },
    url: self.url
}, ret => {
    console.log(ret);
});

step 5: 画面调整

  • view:大小和位置

    如需修改画面的大小及位置,直接调整 RY-TencentVodPlayer 的大小和位置,SDK 会让视频画面跟着您的 view 的大小和位置进行实时的调整。

  • setRenderMode:铺满或适应

this.$refs.vodPlayer.setRenderMode({
    mode: self.renderMode
}, ret => {
    console.log(ret);
});
可选值 含义
0 将图像等比例铺满整个屏幕,多余部分裁剪掉,此模式下画面不会留黑边,但可能因为部分区域被裁剪而显示不全。
1 将图像等比例缩放,适配最长边,缩放后的宽和高都不会超过显示区域,居中显示,画面可能会留有黑边。
this.$refs.vodPlayer.setRenderRotation({
    rotation: 0
}, ret => {
    console.log(ret);
});
可选值 含义
0 home 在下面
1 home 在左边
2 home 在上面
3 home 在右边

画面

step 6: 播放控制

使用 seek 调整播放进度。

this.$refs.vodPlayer.seek({
    value: 100
}, ret => {
    console.log(ret);
});

pause 可以暂停播放。

this.$refs.vodPlayer.pause({}, ret => {
    console.log(ret);
});

resume 可以恢复播放。

this.$refs.vodPlayer.resume({}, ret => {
    console.log(ret);
});

step 7: 结束播放

结束播放时,可以调用 stopPlay 函数。

this.$refs.vodPlayer.stopPlay({}, ret => {
    console.log(ret);
});

step 8: 屏幕截图

通过调用 snapshot 您可以截取当前视频为一帧画面,此功能只会截取当前直播流的视频画面,如果您需要截取当前的整个 UI 界面,请调用 iOS 的系统 API 来实现。

屏幕截图

this.$refs.vodPlayer.snapshot({}, ret => {
    console.log(ret);
});

step 9: 变速播放

点播播放器支持变速播放,通过接口 setRate 设置点播播放速率来完成,支持快速与慢速播放,如0.5X、1.0X、1.2X、2X等。

变速播放

this.$refs.vodPlayer.setRate({
    rate: self.rate
}, ret => {
    console.log(ret);
});

step 10: 本地缓存 [UGC 版本暂不支持]

在短视频播放场景中,视频文件的本地缓存是很刚需的一个特性,对于普通用户而言,一个已经看过的视频再次观看时,不应该再消耗一次流量。

  • 格式支持 SDK 支持 HLS(m3u8)和 MP4 两种常见点播格式的缓存功能。

  • 何时开启? SDK 并不默认开启缓存功能,对于用户回看率不高的场景,也并不推荐您开启此功能。

  • 如何开启? 开启此功能需要配置两个参数:本地缓存目录及需要缓存的视频个数。

this.$refs.vodPlayer.init({
    cacheFolderPath: self.cacheFolderPath, 
    maxCacheItems: self.maxCacheItems,
    docPath: plus.io.convertLocalFileSystemURL('_doc'),
}, ret => {
    console.log(ret);
});

step 11: 预加载

在短视频播放场景中,预加载功能对于流畅的观看体验很有帮助:在观看当前视频的同时,在后台加载即将要播放的下一个视频 URL,这样一来,当用户真正切换到下一个视频时,已经不需要从头开始加载了,而是可以做到立刻播放。

这就是视频播放中无缝切换的背后技术支撑,您可以使用 RY-TencentVodPlayer 的 setAutoPlay 中的 isAutoPlay 开关来实现这个功能,具体做法如下:

预加载

var url_A = @"http://1252463788.vod2.myqcloud.com/xxxxx/v.f10.mp4";
this.$refs.player_A.setAutoPlay({
    isAutoPlay: true
}, ret => {
    console.log(ret);
});
this.$refs.player_A.start({
    url: url_A
}, ret => {
    console.log(ret);
});

var url_B = @"http://1252463788.vod2.myqcloud.com/xxxxx/v.f20.mp4"
this.$refs.player_B.setAutoPlay({
    isAutoPlay: false
}, ret => {
    console.log(ret);
});
this.$refs.player_B.start({
    url: url_B
}, ret => {
    console.log(ret);
});

等到视频 A 播放结束,自动(或者用户手动切换到)视频 B 时,调用 resume 函数即可实现立刻播放。

if (eventType == 'onPlayEnd') {
    this.$refs.player_A.stop({}, ret => {
        console.log(ret);
    });
    this.$refs.player_B.resume({}, ret => {
        console.log(ret);
    });
}

step 12: 贴片广告

setAutoPlay 还可以用来做贴片广告功能,由于设置了 setAutoPlay 为 false 之后,播放器会立刻加载但又不会立刻播放,因此可以在此时展示贴片广告,等广告播放结束,在使用 resume 函数立即开始视频的播放。

step 13: 加密播放 [UGC 版本暂不支持]

视频加密方案主要用于在线教育等需要对视频版权进行保护的场景。如果要对您的视频资源进行加密保护,就不仅仅需要在播放器上做改造,还需要对视频源本身进行加密转码,亦需要您的后台和终端研发工程师都参与其中。联系我们获取 视频加密解决方案 中您会了解到全部细节内容。

目前 RY-TencentVodPlayer 也是支持加密播放的,您可以使用通过 URL 携带身份认证信息的方案,该种方案下 SDK 的调用方式跟普通情况没有什么区别。 您也可以使用 Cookie 携带身份认证信息的方案,该种方案下,需要您通过 RY-TencentVodPlayer init中的 headers 字段设置 cookie 信息于 HTTP 请求头中。

step 14: HTTP-REF [UGC 版本暂不支持]

headers 可以用来设置 HTTP 请求头,例如常用的防止 URL 被到处拷贝的 Referer 字段(腾讯云可以提供更加安全的签名防盗链方案),以及用于验证客户端身份信息的 Cookie 字段。

this.$refs.vodPlayer.init({
    headers: {
        ...
    },
    docPath: plus.io.convertLocalFileSystemURL('_doc'),
}, ret => {
    console.log(ret);
});

step 15: 硬件加速

对于蓝光级别(1080p)的画质,简单采用软件解码的方式很难获得较为流畅的播放体验,所以如果您的场景是以游戏直播为主,一般都推荐开启硬件加速。

软解和硬解的切换需要在切换之前先 stopPlay,使用 setEnableHWAcceleration 切换之后再 startPlay,否则会产生比较严重的花屏问题。

this.$refs.vodPlayer.stopPlay({}, ret => {
    console.log(ret);
});

this.$refs.vodPlayer.setEnableHWAcceleration({
    isHwAcc: true
}, ret => {
    console.log(ret);
});

step 16: 多码率文件 [UGC 版本暂不支持]

SDK 支持 hls 的多码率格式,方便用户切换不同码率的播放流。在收到 onPlayBeginEvt 事件后,可以通过下面 getSupportedBitrates 方法获取多码率数组

this.$refs.vodPlayer.getSupportedBitrates({}, ret => {
    console.log(ret);
});

在播放过程中,可以随时通过 setBitrateIndex 切换码率。切换过程中,会重新拉取另一条流的数据,因此会有稍许卡顿。SDK 针对腾讯云的多码率文件做过优化,可以做到切换无卡顿。

进度展示

点播进度分为两个指标:加载进度和播放进度,目前是以事件通知的方式将这两个进度实时通知出来的。

您可以为RY-TencentVodPlayer对象绑定一个 setVodPlayerListener 监听器,进度通知会通过 onPlayProgress 事件回调到您的应用程序,该事件的附加信息中即包含上述两个进度指标。

进度

if (eventType == 'onPlayProgress') {
    var playable = ret.playable;
    var progress = ret.progress;
}

腾讯云点播下载

点播离线播放是一个非常普遍的需求,用户可以在有网络的地方先下载好视频,等到了无网络的环境可以再次观看。SDK 提供了播放本地文件的能力,但仅限于 mp4 和 flv 这种单一文件格式,HLS 流媒体因为无法保存到本地,所以不能本地播放。现在,您可以通过 RY-TencentVodPlayer-Downlader 将 HLS 下载到本地,以实现离线播放 HLS 的能力。

快速开始

step 1: 开始使用插件

  • 加载插件

插件名称: RY-TencentPlayer-VodDownloader

插件是使用Module方式实现,需要使用以下方法加载

var vodDownloader = uni.requireNativePlugin("RY-TencentPlayer-VodDownloader");
  • 初始化

需要先调用 init 函数,初始化插件,才能调用其他函数和功能。

vodDownloader.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    console.log(ret);
});

step 2: 下载设置

通过 setDownloadListenr 函数,可以返回下载的事件回调

vodDownloader.setDownloadListener({}, ret => {
    console.log(ret);
});

在开始下载前,还需要通过 setDownloadPath 来设置下载的目录

vodDownloader.setDownloadPath({
    path: 'vodDownloader'
}, ret => {
    console.log(ret);
});

step 3: 开始下载

url 方式非常简单,只需要调用 startDownloadUrl 传入下载地址即可

vodDownloader.startDownloadUrl({
    url: 'http://1400345795.vod2.myqcloud.com/d64fa630vodtxxx24344/v.f100220.m3u8'
}, ret => {
    console.log(ret);
});

step 4: 任务信息

在开始下载后,设置的监听函数里可能收到的任务的 事件回调 有:

回调信息 含义
onDownloadStart 任务开始,表示已经开始下载
onDownloadProgress 任务进度,下载过程中,会频繁回调此接口,您可以在这里更新进度显示
onDownloadStop 任务停止,当您调用是stopDownload停止下载,收到此消息表示停止成功
onDownloadFinish 下载完成,收到此回调表示已全部下载。此时下载文件可以给 RY-TencentVodPlayer 播放
onDownloadError 下载错误,下载过程中遇到网络断开会回调此接口,同时下载任务停止

由于 RY-TencentVodPlayer-Downloader 可以同时下载多个任务,所以回调接口里带上了 mediaInfo 对象,您可以访问 url 或 dataSource 判断下载源,同时还可以获取到下载进度、文件大小等信息。

step 5: 中断下载

停止下载请调用 stopDownload 方法,参数为 sartDownloadUrl 返回对象的mediaKey。SDK 支持断点续传,当下载目录没有发生改变时,下次下载同一个文件时会从上次停止的地方重新开始。

如果您不需要重新下载,请调用 deleteDownloadFile 方法删除文件,以释放存储空间。

更多功能

  • 直播弹幕、点赞、送礼等
  • fileId播放、播放
  • 截留录制
  • 直播时移
  • 清晰切换

扫码添加, 获取技术支持:

技术支持



微信号: ruanyunkeji006

隐私、权限声明

1. 本插件需要申请的系统权限列表:

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "android.permission.SYSTEM_ALERT_WINDOW", "android.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE" iOS: 无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用的播放器SDK会采集数据,详情可参考: https://cloud.tencent.com/document/product/881

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问