播放器

最近更新时间:2023-11-15 20:48:01

我的收藏

介绍

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...
});