腾讯云智能创作播放器_音视频解决方案_同尘科技
介绍
Web Iframe 接入可以不用关心播放器细节,如果业务需要自行实现剪辑交互,可以使用我们的播放器进行轨道数据播放。window.YJPlayer
是用于预览 视频合成协议数据 的 Web 播放器构造函数。window.YJPlayer.Helper
提供辅助函数协助组装 合成协议数据。
快速开始
/** * @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("登录异常"); });
播放器
构造函数
参数 | 描述 | 类型 | 是否必填 |
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...});
对音视频的解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?