介绍
Web Iframe 接入可以不用关心播放器细节，如果业务需要自行实现剪辑交互，可以使用我们的播放器进行轨道数据播放。
window.YJPlayer 是用于预览 视频合成协议数据 的 Web 播放器构造函数。window.YJPlayer.Helper 提供辅助函数协助组装 合成协议数据。快速开始
<html><head><!--cdn形式引入我们的sdk---><!-- window.YJPlayer --></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...});
