一、介绍
·window.YJPlayer 是用于预览 视频合成协议数据 的 Web 播放器构造函数。
·window.YJPlayer.Helper 提供辅助函数协助组装 合成协议数据。
二、快速开始
<html> <head> <!–cdn形式引入我们的sdk—> <!– window.YJPlayer –> <script src="https://vs-cdn.tencent-cloud.com/sdk/yj-player@2.0.3.js"></script> </head> <body> <div id="container"></div> </body> <script> /** * @auth 登录方法，保证可以调用CME，WebAPI。 * @param sign {{string}} 签名串，请参见 生成客户端访问签名（Signature） https://cloud.tencent.com/document/product/1156/50898。 * 注意：这里只能使用 action = Login 的签名串 **/ YJPlayer.Helper.CMEUtils.auth({ sign: "your_sign", }) .then(() => { console.log("登录成功"); /** * 创建一个轨道数据 */ const videoTrack = YJPlayer.Helper.Track.create({ type: "video", }); console.log(videoTrack); /*** * 从媒资库获取一个视频类型素材。 * 使用append助手方法往轨道添加元素。 */ YJPlayer.Helper.CMEUtils.createTrackItem(["video_asset_id"]).then( (videoItem) => { YJPlayer.Helper.Track.append(videoTrack, videoItem); videoItem.duration = 8000; //调整播放时长为8秒 const data = [videoTrack]; let player = new YJPlayer({ mode: "preview", container: document.getElementById("container"), aspectRatio: "16:9", data: { tracks: data }, }); player.play(); } ); }) .catch((err) => { console.error("登录异常"); }); </script></html>
三、构造函数
| 参数 | 描述 | 类型 | 是否必填 |
| mode | 播放器模式 | edit | preview | 是 |
| aspectRatio | 播放器舞台纵横比 | 默认值：16:9 | 9:16，对应的分辨率为 960 * 540 以及 540 * 960 | 是 |
| container | yj-player实例所挂载的dom容器 | HTMLElement | 是 |
| data | 剪辑协议数据 | { tracks: [] } | 否 |
const player = new YJPlayer({ mode: "preiew", container: document.getElementById("container"), aspectRatio: "16:9", data: { tracks: [] },});
四、属性
所有的都是只读属性。
| 参数 | 描述 | 类型 |
| width | 播放器舞台区域宽度 | number |
| height | 播放器舞台区域高度 | number |
| ended | 播放器播放结束态标志 | boolean |
| aspectRatio | 播放器舞台纵横比 | 16:9 | 9:16 |
| currentTime | 当前播放画面帧的时间戳，单位为毫秒 | number |
| totalTime | 可播放画面帧的总时长，单位为毫秒 | number |
五、方法
| 方法名 | 参数 | 说明 |
| play | 无 | 播放器启动。 |
| setResolution | 无 | 设置播放器舞台比例 |
| pause | 无 | 播放器暂停 |
| seek | (frame: number) | 播放器跳到指定帧 |
| stop | 无 | 播放器结束，并 seek 到最后一帧 |
| toStart | 无 | 播放器跳到片头 |
| toEnd | 无 | 播放器跳到片尾 |
| forward | (seconds: number) | 视频快进指定秒数 |
| backward | (seconds: number) | 视频后退指定秒数 |
| clear | 无 | 重置播放器数据 |
| updateData | (fustionData: { tracks: [] }) | 更新轨道协议数据，详见轨道协议部分 |
/*** 初次自行设置比例和舞台像素，使用时，传入指定比例* 注意，后台导出的舞台预览仅支持以下比例尺寸.*{ '16:9': { width: 960, height: 540, }, '9:16': { width: 540, height: 960, }, '1:1': { width: 540, height: 540, }, '2:1': { width: 1080, height: 540, }, '6:7': { width: 540, height: 630, }, '7:6': { width: 630, height: 540, }, '3:4': { width: 540, height: 720, }, '4:3': { width: 720, height: 540, },}**/YJPlayer.setResolution("16:9", { width: 960, height: 540,});const player = new YJPlayer({ aspectRatio: "16:9",});
六、事件
| 事件名 | 参数 | 说明 |
| stateChange | (state: playing | pause ) | 播放器状态改变的事件回调 |
| timeUpdate | (frame: number) | 播放器时间更新的事件回调 |
| player:playing | 无 | 播放器开始播放时的事件回调 |
| player:pause | 无 | 播放器暂停播放时的事件回调 |
| player:ended | 无 | 播放器播放结束时的事件回调 |
| player:error | 无 | 播放器加载失败时的事件回调 |
// 所有事件可直接通过应用实例本身进行监听// 播放状态切换player.on("stateChange", (res) => { // do something…});