腾讯云智能创作播放器_音视频解决方案_同尘科技

智能创作 1年前 (2023-11-15) 浏览 93

介绍

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折起,即将结束: 马上收藏

同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠

阿里云解决方案也看看?: 点击对比阿里云的解决方案

- 0人点赞 -

发表点评 (0条)

not found

暂无评论,你要说点什么吗?