更新记录

2.2.0（2022-05-17）

1. 修复iOS playAuth播放方式bug;
2. 修复Android无法刷新视图大小bug;

2.1.0（2022-04-07）

1. 新增刷新播放器视图功能(内测);

2.0.0（2022-03-08）

1. 升级播放器sdk至5.4.5版本;

平台兼容性

原生插件通用使用流程：

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

阿里云视频点播上传

阿里云播放器SDK提供视图大小自定义功能可以简单实现全屏播放的需求，同时提供多实例、自动播放和预加载能力，可实现多视频全屏滑动播放功能。为了节约用户流量和无缝的循环播放，阿里云播放器SDK提供了边播边缓存和循环播放接口，只需简单设置即可满足应用场景。

技术支持

产品复杂度较高，接入前请先联系我们，技术会引导您免费接入和免费测试。

温馨提示：建议接入成功后再购买。

注意：插件默认提供右侧示例代码中的功能；部分高级功能需要额外授权开通。

联系我们，获取技术支持和开通测试账号。

定制UI

联系我们，获取定制UI。

快速开始

步骤1: 集成插件

• 加载插件

插件名称: MZ-AliyunVodPlayer

使用前，您需要先加载插件:

<MZ-AliyunVodPlayer class="player" ref="vodPlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></MZ-AliyunVodPlayer>

• 阿里云配置

注册或者登录 [阿里云]() ，然后按照 使用流程 来配置和使用。

步骤2: 开始使用插件

使用前需要调用 [init]() 初始化插件，来初始化上传实例。

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

步骤3: 设置监听器

调用 [setPlayerListener]() 设置监听器，监听器会返回播放器的事件回调。

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

步骤4: 创建数据源，准备播放

调用 [setUrlSource]()，使用url播放

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

使用 [prepare]() 准备播放

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

步骤5: 播放控制

您可以自行创建播放器的播放控制按钮，在按钮事件里面实现播放器控制接口。 基本控制功能有播放、停止、暂停、拖动（Seek），其中Seek功能仅对点播有效。示例如下：

// 开始播放
this.$refs.vodPlayer.start({
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    console.log(ret);
});
// 暂停播放
this.$refs.vodPlayer.pause({}, ret => {
    console.log(ret);
});
// 停止播放
this.$refs.vodPlayer.stop({}, ret => {
    console.log(ret);
});
// 跳转到。目前只支持不精准。
this.$refs.vodPlayer.seekToTime({
    position: 150
}, ret => {
    console.log(Ret);
});
// 重置
this.$refs.vodPlayer.reset({}, ret => {
    console.log(ret);
});

步骤6: 切换多码率

播放器SDK支持HLS多码率地址播放。在prepare成功之后，通过getMediaInfo可以获取到各个码流的信息，即TrackInfo

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

在播放过程中，可以通过调用播放器的selectTrack方法切换播放的码流

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

切换的结果会在onTrackChanged回调

this.$refs.vodPlayer.setPlayerListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('' == ret.eventType) {
            // video change 
        }
    }
});

更多功能

• STS、MVP(内测)；
• 高级控制(内测)

加入交流群联系我们, 获取技术支持