更新记录

6.2.0（2024-04-15）

1. 新增播放器预加载功能(内测);

6.1.1（2024-03-02）

1. 新增屏幕控制功能(内测);

6.1.0（2024-02-07）

1. 新增字幕跟轨道支持(内测);

平台兼容性

原生插件通用使用流程：

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原生插件配置”->”云端插件“列表中删除该插件重新选择

腾讯云点播播放器

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

接口模式(纯API)

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

Android	iOS	联系我们

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

UI模式

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

Android	iOS	联系我们

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

定制UI

扫码添加我们技术支持(微信号: ruanyunkeji006)，联系定制UI

技术支持

建议扫码添加我们技术支持，协助接入和开发。

联系我们	微信号	更多功能
	ruanyunkeji006	fileId播放 fileId下载

API 接口文档

使用教程

快速开始

步骤 1: 集成插件

插件名称: RY-TencentVodPlayer

• 加载插件

1. 使用 自定义基座 ，引入插件；

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

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

说明:

可以通过修改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);
});

步骤 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);
});

步骤 5: 画面调整

• view：大小和位置

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

• setRenderMode：铺满或适应

this.$refs.vodPlayer.setRenderMode({
    mode: self.renderMode
}, ret => {
    console.log(ret);
});

• setRenderRotation：画面旋转

this.$refs.vodPlayer.setRenderRotation({
    rotation: 0
}, ret => {
    console.log(ret);
});

步骤 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);
});

步骤 7: 结束播放

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

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

步骤 8: 屏幕截图

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

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

步骤 9: 变速播放

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

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

步骤 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);
});

步骤 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);
    });
}

步骤 12: 贴片广告

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

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

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

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

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

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

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

步骤 15: 硬件加速

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

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

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

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

步骤 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;
}

更多功能

• fileId播放
• fileId下载

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

微信号: ruanyunkeji006