更新记录

3.0.0(2021-04-29)

  1. 修复播放进度单位不一致问题;
  2. 修复设置开始播放时间bug;
  3. 升级底层播放器库文件;

2.0.0(2021-04-12)

  1. 新增视频下载模块;
  2. 修复部分情况下底层库冲突引起打包冲突问题;
查看更多

平台兼容性

Android iOS
适用版本区间:4.4 - 11.0 适用版本区间:9 - 14

原生插件通用使用流程:

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


腾讯云播放器

该模块可以实现点播播放和直播播放功能,支持点播和直播基本控制,以及点播、直播高级功能等。

技术支持

如果希望获取更多高级功能或者技术支持,可以联系我们的客服微信: ruanyunkeji001或ruanyunkeji002

点播播放器

第一步: 获取播放地址

播放器地址可以为url也可以为fileId方式,详细参考腾讯云点播后台,上传视频文件成功后的地址。 可以在js的data()中声明播放器的宽度和高度,这样在代码中可以控制这两个参数的改变,可以参考下方代码:

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        url: 'http://1251049911.vod2.myqcloud.com/8ac00xxxx/ZFZS29wR5K0A.mp4',
    }
}

url为播放视频的地址。

第二步: 开始使用模块

  1. 新建nvue文件,注意该模块必须在nvue中使用 模块名称为: RY-TencentPlayer-Vod,使用标签

    <div class="player">
        <RY-TencentPlayer-Vod ref="vodPlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentPlayer-Vod>
    </div>
  2. 初始化模块

init({params})

this.$refs.vodPlayer.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc'),
});

docPath为必填参数,需要指定为_doc目录,需要经过plus.io.convertLocalFileSystemURL转化为系统绝对路径。

第三步: 监听播放事件

setPlayerEventListener({}, ret)

this.$refs.vodPlayer.setPlayerEventListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

第四步: 开始播放

start({param}, ret)

var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
self.playerWidth = windowWidth;
self.playerHeight = windowWidth * 9 / 16;

this.$refs.vodPlayer.start({
    url: self.url
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

url为必填参数,指定播放的地址。

第五步: 暂停和继续播放

pause()

resume()

this.$refs.vodPlayer.pause();
this.$refs.vodPlayer.resume();

第六步: 停止播放

stop()

this.$refs.vodPlayer.stop({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

第七步: 移除监听

removePlayerListener()

this.$refs.vodPlayer.removePlayerEventListener();

直播播放器

第一步: 腾讯云配置

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

  1. 使用"腾讯云工具包"进行推流测试
    • 在app store或者手机应用市场搜索"腾讯云工具包"下载并安装;
    • 注册登录后, 点击"移动直播",选择"摄像头推流", 点击右上方的"New"按钮,生成推流,同时会有播放地址(iOS会自动复制到剪切板当中),点击开始推流;复制并记录拉流的地址,这个地址为后文的"flvUrl"

第二步: 开始使用模块

  1. 新建nvue文件,注意该模块必须在nvue中使用 模块名称为: RY-TencentPlayer-Live,使用标签
    <template>
    <div class="player">
        <RY-TencentPlayer-Live ref="livePlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentPlayer-Live>
    </div>
    </template>

备注: 可以在js的data()中声明播放器的宽度和高度,这样在代码中可以控制这两个参数的改变,可以参考

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        flvUrl: 'http://xxxx.liveplayer.xxxx.cn/live/xxx.flv?txSecret=xxxxx&txTime=xxxx'
    }
}
  1. 初始化模块

init({params})

初始化模块

this.$refs.livePlayer.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc')
});

第三步: 开始拉流

var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
self.playerWidth = windowWidth / 2;
self.playerHeight = windowHeight / 2;
this.$refs.livePlayer.start({
    flvUrl: self.flvUrl
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

备注: flvUrl为前面步骤中获取得到的拉流播放地址,这里演示将宽度和高度设置为播放器的一半,您可以根据需要自定义

第四步: 暂停、恢复拉流播放

this.$refs.livePlayer.pause();
this.$refs.livePlayer.resume();

第五步: 停止拉流

this.$refs.livePlayer.stop({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

第六步: 直播事件管理

可以通过

this.$refs.livePlayer.setPlayerEventListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

监听各种直播事件

也可以通过移除监听,来停止事件监听

this.$refs.livePlayer.removePlayerEventListener();

更多功能

联系我们获取更能多增值功能

  • 点播高级控制
  • 直播高级控制

隐私、权限声明

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. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

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