腾讯云智能创作合成协议_音视频解决方案_同尘科技
合成协议可视化编辑在页面上的体现为红框所示部分，进一步体验请登录 腾讯制作云。
注意合成协议用于描述导出合成视频原始资源的组织形式，如果输入协议异常，会引起导出失败等预期外行为。
示例合成协议
[ { "id": "9e841f80-371f-46c7-ae15-70d2a3d7846f", "items": [ { "asset_id": "381921553743708603@Public@CME", "contents": { "text": "猫头鹰" }, "duration": 3000, "id": "2f6897a3-6491-4ac5-8d20-83a32e3ff2fe", "start_time": 0, "text_style_id": "381921553743708603@Public@CME", "type": "subtitle" }, { "asset_id": "381921553743708603@Public@CME", "contents": { "text": "松鼠" }, "duration": 3000, "id": "4a2ecfb5-498d-4218-9ba6-917fe70353d0", "is_new": true, "start_time": 3000, "text_style_id": "381921553743708603@Public@CME", "type": "subtitle" } ], "styles": [ { "id": "381921553743708603@Public@CME", "text_style": { "align": "center", "bold": 0, "font": "SimHei", "font_color": "#ffffff", "font_size": 60, "height": 110, "italic": 0 } } ], "type": "subtitle" }, { "id": "738157fa-8ae5-4ae0-8ead-b5e8d4ef70d7", "items": [ { "asset_id": "5fc609c6b41f1d0001beab46@Public@CME", "duration": 3000, "filter_asset_id": "", "height": 541, "id": "83069edb-99c3-4a29-8446-6d4feba86832", "operations": [ { "params": { "angle": 0 }, "type": "image_rotate" } ], "position": { "x": 480, "y": 270 }, "section": { "from": 0, "to": 3000 }, "start_time": 0, "type": "image", "width": 773 }, { "asset_id": "5fc609ceb41f1d0001beab95@Public@CME", "duration": 3000, "filter_asset_id": "", "height": 540, "id": "3ae2a8d4-d326-4367-9712-922580506a51", "operations": [ { "params": { "angle": 0 }, "type": "image_rotate" } ], "position": { "x": 480, "y": 270 }, "section": { "from": 0, "to": 3000 }, "start_time": 3000, "type": "image", "width": 811 } ], "type": "video" }]
协议主要概念
舞台：合成视频的可视区域，可视区域包含两个要素，宽高比以及分辨率，目前支持两种比例，16:9与9:16，SDK默认舞台分辨率为 960 * 540。注意导出时会使用原素材重新合成，所以导出分辨率和预览分辨率无关，可导出分辨率有三种，具体请参见 导出详情。剪辑时间线：所有在舞台上的资源以及相关内容，都在同一时间线上播放。此时间线与资源本身无关。同一轨道上的时间线不可重叠。轨道(Track)：决定舞台展示层级的容器，顺序字段用数字表示，从小到大，表示从顶层到底层，顶层值为 0，参见 轨道。轨道元素(TrackItem)：决定展示内容的容器，只能承载媒资，参见 轨道元素。媒资管理：整合到制作云系统的基本媒体资源，如何导入媒资，具体请参见 导入素材库。
基本概念
// 轨道元素const trackItem = { id: "45ea83ad-a770-4e4a-a9b2-93cdefa4d369", start_time: 1440, // 剪辑时间线上的开始时间 duration: 7880, // 剪辑时间线上的持续时间 type: "video", // 素材类型 section: { // 素材时间戳截取，素材有自身时间线时，才有此属性 from: 0, to: 7880, }, asset_id: "5f6464c6ccbc8d0001fc308b", // 素材 id width: 540, height: 304, position: { x: 270, y: 480, }, operations: [ // 对该元素的操作处理，这里是指的旋转，具体请参见 多媒体处理部分 { type: "image_rotate", params: { angle: 0, }, }, ],};
// 轨道const track = { id: "beb45741-c9f0-45b7-a06c-d33b579208b8", type: "video", order: 0, // 轨道层级 items: [trackItem], // 轨道上的轨道元素};
// 后台导出协议：https://cloud.tencent.com/document/product/1156/44159const TrackData = JSON.stringify([track]);
说明 注意上述轨道协议用于后台导出，不能直接通过 yjplayer.updateData({ tracks }) 更新到播放器，前端通过合成协议助手拼装轨道数据。
轨道
轨道一共有六种类型：title、frame、subtitle、image、audio、video，每种轨道能容纳的素材对应如下：
| 轨道 | 容纳素材 | 中文描述 |
| title | title | 文本 |
| subtitle | subtitle | 字幕 |
| image | sequence | 序列帧（此类素材只能从智能创作素材制作工具产出） |
| frame | frame,shader | 特效 |
| audio | audio | 音频 |
| video | video/image/transition | 视频/图片/转场 |
素材类型协议描述请参见 轨道元素。
决定展示内容的容器，只能导入我们的素材库，请参见 导入素材库。
轨道元素
主要支持以下类型素材：
| 名称 | 说明 |
| video | 视频。 |
| audio | 音频。 |
| image | 图片。 |
| title | 作为内容填充的文本文字。 |
| subtitle | 字幕，语音内容的文字展示形式。 |
| frame | 特效。 |
| transition | 转场。 |
video
该种类的素材我们提供了更丰富的处理形式，具体请参见 多媒体处理，元素示例如下：
const videoItem = { id: "45ea83ad-a770-4e4a-a9b2-93cdefa4d369", start_time: 1440, //剪辑时间线上的开始时间 duration: 7880, //剪辑时间线上的持续时间 type: "video", //素材类型 section: { // 素材时间戳截取，素材有自身时间线时，才有此属性。 from: 0, to: 7880, }, asset_id: "5f6464c6ccbc8d0001fc308b", width: 540, height: 304, // 前端预览暂不支持通过 height 调整视频大小 position: { x: 270, y: 480, }, operations: [ //对该元素的操作处理，这里是指的旋转，具体请参见 多媒体处理章节。 { type: "image_rotate", params: { angle: 0, }, }, ],};
image
该种类的素材我们提供了更丰富的处理形式，具体请参见 多媒体处理，图片除开没有自身时间线外，与视频类型素材基本一致，示例如下：
const imageItem = { id: "45ea83ad-a770-4e4a-a9b2-93cdefa4d369", start_time: 1440, //剪辑时间线上的开始时间 duration: 7880, //剪辑时间线上的持续时间 type: "image", //素材类型 asset_id: "5f6464c6ccbc8d0001fc308b", width: 540, height: 304, // 前端预览暂不支持通过 height 调整图片大小 position: { x: 270, y: 480, }, operations: [ //详情参见多媒体处理章节。 { type: "image_rotate", params: { angle: 0, }, }, ],};
audio
该种类的素材我们提供了更丰富的处理形式，具体请参见 多媒体处理，示例如下：
const audioItem = { id: "3259bbc5-c581-43eb-96a3-1fac66c46aa8", type: "audio", order: 0, items: [ { id: "c6424c76-0320-4f92-9607-d2a53748fb14", start_time: 0, duration: 60080, type: "audio", asset_id: "281921553743719902@Public@CME", section: { from: 0, to: 60080, }, operations: [], //详情参见多媒体处理章节。 }, ],};
title
作为内容填充的文本文字，内容填充的文字可以调整样式，示例数据如下：
const titleItem = { id: "f83a90eb-a9d9-4634-81d4-c7dc130afaec", start_time: 80, duration: 3000, type: "advanced_title", // 固定文字类型不可变更。 content: { template_id: "yj_templ_title_text", //固定模板ID,不可变更 params: { text: "文字标题", //文字内容 text_style: { //具体属性可参考下面的列表 font_size: 60, font_color: "#ffffff", align: "center", height: 220, bold: 0, italic: 0, }, }, }, position: { x: 270, y: 480, }, width: 240, // 前端预览暂不支持通过 width 调整文字宽度 height: 69, // 前端预览暂不支持通过 height 调整文字高度 transition: [ //动画效果 { start_time: 0, //动画效果起始时间 duration: 500, //动画效果持续时间 type: "in", //动画类型入场 name: "fade", }, { start_time: 2500, duration: 500, type: "out", //动画类型出场 name: "move", // }, ], // 动画效果，用于前端预览,组装复杂协议建议使用我们提供的sdk transitionFE: { start: { name: "FadeIn", //动画类型入场 duration: 500, //动画效果持续时间 }, end: { name: "MoveOut", //动画类型出场 duration: 500, }, },};
说明文字text_style可支持文字的 通用属性设置。自由文字动画效果，暂时只支持一个入场一个出场。
| 名称 | 描述 | 出入场限制 |
| fade | 淡入 | in，out |
| move | 左移入 | in，out |
| scale | 放大 | in，out |
| bounce | 弹跳 | in |
subtitle
字幕类型基本示例如下，字幕类型素材的文字样式轨道通用，所以文字样式是挂载在轨道数据结构：
const subTitleItem = { id: "3d343d8d-f950-40ea-aa50-e4e0c16cf2f2", start_time: 480, duration: 3000, type: "subtitle", style_id: "381921553743708206@Public@CME", text: "字幕文字1", asset_id: "381921553743708206@Public@CME",};
/***** * 字幕样式对象 * **/const styleItem = { id: "381921553743708206@Public@CME", content: { template_id: "yj_templ_subtitle_common", params: { font_size: 60, font_color: "#ffffff", align: "center", height: 110, bold: 0, italic: 0, background_color: "#000000", background_alpha: 100, font: "SimHei", margin_bottom: 125, font_align: "right", font_align_margin: 30, bottom_color: "#3A1616", bottom_alpha: 100, border_color: "#FFFFFF", border_width: 2, }, },};
说明字幕文字的params支持 文字通用设置。
frame
注意特效元素，只支持固定模板，和固定操作。特效必须覆盖其它素材，所以轨道层级处于顶层位置。更多内容请参见 image-glshader。示例：
const item = { id: "7ae45f5d-f351-4351-b501-64f36ab74f2d", width: 960, height: 540, // 前端预览暂不支持通过 height 调整大小 start_time: 0, duration: 3000, type: "frame", operations: [ { type: "image_glshader", params: { name: "LightCircle", //可替换模板 }, }, ], shaderName: "LightCircle", //预览模板 controlVisible: true, // 前端预览控制是否可见};
transition
注意转场元素，只支持固定模板。转场元素必须在两个 video 元素之间。转场会叠加两个元素之间时间，转场是平均过渡，所以对转场前后元素有时间要求。推荐使用我们的 SDK 做转场添加操作。具体请参见 典型案例。代码示例：
const tracks = [ { id: "fdc7bba6-fed6-4fb2-8fe8-e471f599de8b", type: "video", order: 0, items: [ { id: "11da8fa9-3303-4dd9-9895-c112254ad274", start_time: 0, duration: 6620, type: "video", section: { from: 0, to: 6620, }, asset_id: "5f3de82664ac1d000117a8e5", filter_asset_id: "", width: 960, height: 540, position: { x: 480, y: 270, }, operations: [ { type: "image_rotate", params: { angle: 0, }, }, ], }, /** *这是转场元素,转场时长3秒，注意前后视频元素与转场元素的时间覆盖。 **/ { id: "184b06ab-e406-4bc7-b29d-d50c803321cd", asset_id: "381921553743709257@Public@CME", start_time: 3620, duration: 3000, type: "transition", prev_item_id: "11da8fa9-3303-4dd9-9895-c112254ad274", next_item_id: "c3d59391-0e37-4e98-a03a-944fba0670a4", operations: [ { type: "trans_image_glt", params: { name: "doorway", //转场效果名字 }, }, { type: "trans_audio_fade_inout", params: {}, }, ], record: { prev_item_init: 5120, next_item_init: 5120, next_item_start_time: 5120, }, }, { id: "c3d59391-0e37-4e98-a03a-944fba0670a4", start_time: 3620, duration: 6380, type: "video", section: { from: 3620, to: 10000, }, asset_id: "5f3de82664ac1d000117a8e5", filter_asset_id: "", width: 960, height: 540, position: { x: 480, y: 270, }, operations: [ { type: "image_rotate", params: { angle: 0, }, }, ], }, ], },];
转场效果列表
| 素材 ID | 名称 | 中文描述 |
| 617281ea02af87115081286b@Public@CME | crosshatch | 交叉网格 |
| 617281ea02af87115081286a@Public@CME | colorphase | 色彩溶解 2 |
| 617281ea02af871150812869@Public@CME | circle | 椭圆遮罩 |
| 617281ea02af871150812868@Public@CME | cannabisleaf | 枫叶遮罩 |
| 617281ea02af871150812867@Public@CME | burn | 燃烧转场 |
| 617281ea02af871150812866@Public@CME | angular | 逆时扫描 |
| 617281ea02af871150812865@Public@CME | WaterDrop | 水滴溶解 |
| 617281ea02af871150812864@Public@CME | StereoViewer | 分身融合 |
| 617281ea02af871150812863@Public@CME | SimpleZoom | 拉近变焦 |
| 617281ea02af871150812862@Public@CME | GridFlip | 网格翻转 |
| 617281ea02af871150812861@Public@CME | GlitchDisplace | 水银溶解 |
| 617281ea02af871150812860@Public@CME | CrossZoom | 交叉变焦 |
| 617281ea02af87115081285f@Public@CME | ColourDistance | 色彩溶解 1 |
| 617281ea02af87115081285e@Public@CME | Bounce | 向下跳动 |
| 617281ea02af87115081285d@Public@CME | Directional | 向下平移 |
| 617281ea02af87115081285b@Public@CME | fadecolor | 黑色转场 |
| 617281ea02af87115081285a@Public@CME | LinearBlur | 交叉溶解 |
| 600590f402af8747f6eb32e8@Public@CME | ZoomInCircles | 水波纹 |
| 600590f402af8747f6eb32e7@Public@CME | wipeUp | 向上收起 |
| 600590f402af8747f6eb32e6@Public@CME | wipeRight | 向右收起 |
| 617281ea02af87115081287f@Public@CME | windowslice | 窗口切片 |
| 617281ea02af87115081287e@Public@CME | wind | 线条向右 |
| 617281ea02af87115081287d@Public@CME | undulatingBurnOut | 椭圆遮罩 2 |
| 617281ea02af87115081287c@Public@CME | squeeze | 挤压 |
| 617281ea02af87115081287b@Public@CME | squareswire | 矩形溶解 2 |
| 617281ea02af87115081287a@Public@CME | rotate_scale_fade | 风车旋转 |
| 617281ea02af871150812879@Public@CME | ripple | 波纹溶解 |
| 617281ea02af871150812878@Public@CME | randomsquares | 矩形溶解 1 |
| 617281ea02af871150812877@Public@CME | pixelize | 像素溶解 |
| 617281ea02af871150812876@Public@CME | pinwheel | 风车遮罩 |
| 617281ea02af871150812875@Public@CME | perlin | 花边遮罩 |
| 617281ea02af871150812874@Public@CME | multiply_blend | 多重混合 |
| 617281ea02af871150812873@Public@CME | morph | 缓慢抖动 |
| 617281ea02af871150812872@Public@CME | luminance_melt | 线条向下 |
| 617281ea02af871150812871@Public@CME | kaleidoscope | 万花筒 |
| 617281ea02af871150812870@Public@CME | hexagonalize | 六边形网格 |
| 617281ea02af87115081286f@Public@CME | flyeye | 水波溶解 |
| 617281ea02af87115081286e@Public@CME | fadegrayscale | 缓慢渐变 |
| 617281ea02af87115081286d@Public@CME | displacement | 左上擦除 |
| 617281ea02af87115081286c@Public@CME | directionalwipe | 右下擦除 |
| 600590f402af8747f6eb32e5@Public@CME | wipeLeft | 向左收起 |
| 600590f402af8747f6eb32e4@Public@CME | wipeDown | 向下收起 |
| 600590f402af8747f6eb32e3@Public@CME | windowblinds | 百叶窗 |
| 600590f402af8747f6eb32e2@Public@CME | Swirl | 螺旋 |
| 600590f402af8747f6eb32e1@Public@CME | swap | 放大切换 |
| 600590f402af8747f6eb32e0@Public@CME | Radial | 雷达扫描 |
| 600590f402af8747f6eb32df@Public@CME | PolkaDotsCurtain | 弧形扩散 |
| 600590f402af8747f6eb32de@Public@CME | polar_function | 椭圆扩散 |
| 600590f402af8747f6eb32dd@Public@CME | DoomScreenTransition | 幕布 |
| 600590f402af8747f6eb32dc@Public@CME | cube | 立方体 |
| 600590f402af8747f6eb32db@Public@CME | circleopen | 椭圆聚拢 |
| 600590f402af8747f6eb32da@Public@CME | ButterflyWaveScrawler | 晃动 |
| 381921553743709260@Public@CME | InvertedPageCurl | 翻页 |
| 381921553743709259@Public@CME | heart | 心形 |
| 381921553743709256@Public@CME | crosswarp | 交叉扭曲 |
| 381921553743709258@Public@CME | GlitchMemories | 抖动 |
| 381921553743709253@Public@CME | Dreamy | 波浪 |
| 381921553743709257@Public@CME | doorway | 门廊 |
| 381921553743709255@Public@CME | DreamyZoom | 梦幻变焦 |
| 381921553743709249@Public@CME | BowTieHorizontal | 水平蝴蝶结 |
| 381921553743709252@Public@CME | Mosaic | 九宫格 |
| 381921553743709251@Public@CME | CircleCrop | 圆环聚拢 |
| 381921553743709250@Public@CME | BowTieVertical | 垂直蝴蝶结 |
| 381921553743708553@Public@CME | fade | 淡入淡出 |
元素类型及轨道关系
| 资源类型 | 元素子类型 | 所在轨道类型 |
| 自由文字 | advanced_title | title |
| 音频 | audio | audio |
| 马赛克 | frame | frame |
| 图片 | image | video |
| 视频 | video | video |
| 转场 | transition | video |
| 字幕 | subtitle | subtitle |
| 风格 | frame | frame，subType=”shader” |
轨道元素必要属性
const trackItem = { id: "61afa77e-8c1f-4fcb-8255-f4d8f4617d0b", // 元素ID,单个剪辑协议内唯一，如果使用我们的sdk，可以不关注此id的的生产。 start_time: 880, // 剪辑时间线上的开始时间。 type: "video", // 素材类型.表明当前素材类型,以决定如何处理. duration: 3000, // 播放持续时间。 asset_id: "731195088946733255", // 媒资id。};
轨道元素位置计算
默认的舞台分辨率为960 * 540，采用直角坐标系确定元素位置，以左上角为原点(0,0)。整个舞台位于坐标系第一象限内。元素的position属性默认描述元素中心点。例如一张100*100的图片紧贴原点完整放置在舞台上，那么它的position值为(50,50)。
| 属性值 | 类型 | 说明 |
| x | number | 横坐标。 |
| y | number | 纵坐标。 |
轨道元素截取
说明仅在自身有时间线的元素上存在，例如 音频，视频。
| 属性值 | 类型 | 说明 |
| from | number | 片段起始时间戳，单位为毫秒 ms。 |
| to | number | 片段末尾时间戳，单位为毫秒 ms。 |
轨道元素通用数据
文字通用属性
说明适用于title的text_style属性，以及subtitle的params属性。
| 属性值 | 类型 | 说明 |
| height | number | 高度，仅字幕可用。（必要） |
| font_size | number | 字体大小。（必要） |
| font_color | string | 字体颜色，16 进制 RGB，如 #ffffff。 (必要) |
| font | string | 字体名 |
| font_alpha | number | 背景透明度，范围[0, 100]。 |
| font_align | string | 水平对齐方式：center（默认）、left、right。 |
| font_uline | number | 下划线宽度。 |
| font_align_margin | number | 大于等于 0，font_align=left 表示左边距，font_align=right 表示右边距，其他无效。 |
| bold | number | 字体加粗，默认 0（不加粗）、1（加粗）。仅可用于黑体、宋体和楷体。字幕（subtitle）使用 bold 属性，内容填充文字（advanced_title）使用 font_bold。 |
| italic | number | 字体倾斜，默认 0（正常）、1（斜体），字幕（subtitle）使用 italic 属性，内容填充文字（advanced_title）使用 font_italic。 |
| border_width | number | 边框宽度，取值只支持 0 和 1。 |
| border_color | string | 边框颜色，border_width 不为 0 时有效。 |
| border_alpha | number | 边框透明度，border_width 不为 0 时有效，取值只支持 0 和 100。 |
| shadow_color | string | 文字阴影，仅内容填充文字（advanced_title）可用。 |
| shadow_alpha | number | 背景透明度，范围[0, 100]，shadow_color 存在时有效，仅内容填充文字（advanced_title）可用。 |
| bottom_color | string | 文字底色，仅字幕（subtitle）可用。 |
| bottom_alpha | number | 文字底色透明度，范围[0, 100]，bottom_color 存在时有效，仅字幕（subtitle）可用。 |
| background_color | string | 全屏背景颜色，16 进制 RGB，如 #000000。 |
| background_alpha | number | 全屏背景透明度，范围[0, 100]，background_color 存在时有效。 |
| margin_bottom | number | 仅字幕（subtitle）可用，默认为 0。 |
多媒体处理
说明该属性允许调整素材的一些基础信息，通过operations字段进行设置，完整能力如下列表，Y 表示支持此操作，N 表示不支持。
| operation | video | image | audio | transition | frame | 备注 |
| image_mirror | 支持 | 支持 | 不支持 | 不支持 | 不支持 | 图像镜像。 |
| image_rotate | 支持 | 支持 | 不支持 | 不支持 | 不支持 | 图像旋转。 |
| image_filter_normal | 支持 | 支持 | 不支持 | 不支持 | 不支持 | 普通图像滤镜。 |
| image_filter_lut | 支持 | 支持 | 不支持 | 不支持 | 不支持 | Lut 滤镜模板。 |
| image_transparent | 支持 | 支持 | 不支持 | 不支持 | 不支持 | 图像透明度。 |
| image_crop | 支持 | 支持 | 不支持 | 不支持 | 不支持 | 图像剪切，不可单独预览。 |
| image_space | 支持 | 支持 | 不支持 | 不支持 | 不支持 | 图像缩放，不可单独预览。 |
| image_mosaic | 不支持 | 不支持 | 不支持 | 不支持 | 支持 | 马赛克。 |
| image_glshader | 不支持 | 不支持 | 不支持 | 不支持 | 支持 | 特效。 |
| image_lens_stretch | 支持 | 支持 | 不支持 | 不支持 | 支持 | 运动效果。 |
| audio_volumes | 支持 | 不支持 | 支持 | 不支持 | 不支持 | 音量调整。 |
基础示例：
/* 图像(图片、视频图像) 相关的操作 */const imageMirrorOp = { type: "image_mirror", // 【必选】【string】 operation 类型， params: { left_right: 1, // 【必选】【int】 取值：1-左右镜像 up_down: 1, // 【必选】【int】 取值：1-上下镜像 },};// 图像旋转const imageRotateOp = { type: "image_rotate", // 【必选】【string】 operation 类型， params: { angle: 90, // 【必选】【int】 旋转角度 },};// 图像简单滤镜const imageFilterNormalOp = { type: "image_filter_normal", params: { contrast: 100, // 【必选】【int】 对比度，取值范围 [-100, 100]，0 表示不处理 brightness: 50, // 【必选】【int】 亮度，取值范围 [-100, 100]，0 表示不处理 saturation: -20, // 【必选】【int】 饱和度，取值范围 [-100, 100]，0 表示不处理 },};
// 图像透明const imageTransparentOp = { type: "image_transparent", params: { alpha: 0, // 【必选】【int】 透明度，取值范围[0,100]，0表示透明 },};// 图像裁剪const imageCropOp = { type: "image_crop", params: { x: 0, // 【必选】【int】 裁剪起始点(相对于item的) y: 0, // 【必选】【int】 裁剪起始点(相对于item的) width: 0, // 【必选】【int】 裁剪宽度 height: 0, // 【必选】【int】 裁剪高度 },};// 图像马赛克const imageMosaicOp = { type: "image_mosaic", params: { name: "vague", // 【必选】【string】 马赛克类型，目前只支持模糊(vague)、方块（mosaic） x: 0, // 【必选】【int】 马赛克起始点(相对于item的) y: 0, // 【必选】【int】 马赛克起始点(相对于item的) width: 0, // 【必选】【int】 马赛克宽度 height: 0, // 【必选】【int】 马赛克高度 degree: 100, // 【可选】【int】 马赛克程度，范围[0,100] },};
// 调整大小和位置
const imageSpaceOp = { type: "image_space", params: { x: 0, // 【可选】【int】 存在表示新的中心点x y: 0, // 【可选】【int】 存在表示新的中心点y width: 0, // 【可选】【int】 存在且大于0，表示新的宽度 height: 0, // 【可选】【int】 存在且大于0，表示新的高度 },};// 图像opengl shader效果
const imageGlshaderOp = { type: "image_glshader" params: { name: "xxx", // 【必选】【string】 效果名称 },};
// 音量调整const audioOp = { type: "audio_volumes", params: { "all": 52 // 【必选】【number】 音量大小，值域0-100 }};
crop
裁剪功能预览的流程如下：1.1 将待裁剪视频按照满屏的方式放置到舞台内。1.2 在满屏基础上设置裁剪区域。1.3 还原视频位置信息。说明裁剪数据设置流程复杂，如需设置也可以使用我们 SDK 提供的crop方法。示例：
const item = {id: "0bfdd748-b548-42f4-9711-09ae5c534061",start_time: 0,duration: 63560,type: "video",section: { from: 0, to: 63560,},asset_id: "5f6464c6ccbc8d0001fc308b",width: 960, //视频原始宽高height: 254, //视频原始宽高position: { //元素原本位置信息 x: 480, y: 270,},operations: [ { /*** 对视频重设，让其满屏**/ type: "image_space", params: { x: 480, y: 270, width: 960, height: 540, }, from: "crop_start", //表示裁剪开始 }, { /*** 设置裁剪区域，裁剪区域是一个矩形，* x,y为裁剪位置* width,height表示裁剪区域**/ type: "image_crop", params: { x: 376, y: 28, width: 223, height: 59, }, }, { /*** 还原元素位置和大小，这个示例里裁剪开始前与裁剪结束后位置是一样的。**/ type: "image_space", params: { x: 480, y: 270, width: 960, height: 254, }, from: "crop_end", //裁剪结束 },],sizeControl: 0,};
image-mosaic说明特效类轨道必须是覆盖在普通视频轨道之上。示例：
/*** * 必须使用特效类轨道。 ***/const trackItem = { id: "adfe3eab-db8f-4b4c-96e8-730bf3a9226d", type: "frame", order: 0, items: [],};
const item = { id: "0c5e990d-bdf9-47f6-b1a5-ac7639060e4f", asset_id: "fe-731195088946733254", start_time: 0, duration: 3000, type: "frame", operations: [ { type: "image_mosaic", //类型固定为 image_mosaic params: { name: "mosaic", //名字固定为 image_mosaic degree: 20, x: 311, y: 40, width: 320, height: 180, }, }, ],};
/** * 放入轨道 * */track.items.push(trackItem);
/** * 最终数据结构 * */const data = [trackItem];
image-filter-lut
协议示例大致如下：
const item = {id: "7edc76a8-1a28-4546-b0ca-fd7403660ca1",start_time: 0,duration: 63560,type: "video",section: { from: 0, to: 63560,},asset_id: "5f6464c6ccbc8d0001fc308b",width: 960,height: 540,position: { x: 480, y: 270,},operations: [ { type: "image_rotate", params: { angle: 0, }, }, { /** * 注意: 这里要使用我们的协议工具辅助完成拼装。 * 详情请看下面 ***/ type: "image_filter_lut", params: { name: "yj_templ_lut_24", //修改此模板ID即可变更效果 image_url: "https://1810000000.vod2.myqcloud.com/b64e98acvodcq1810000000/thumbnail/filter/yj_templ_lut_24.png", }, },],};
注意滤镜素材使用请参见 典型案例-使用公共滤镜。
/** * 所有的滤镜素材 **/const tplMap = [ { Name: "氰版照", MaterialId: "5fd329e702af8755735859a1@Public@CME" }, { Name: "胶片", MaterialId: "5fd329e702af87557358599f@Public@CME" }, { Name: "魅影", MaterialId: "5fd329e702af87557358599e@Public@CME" }, { Name: "冷酷", MaterialId: "5fd329e702af87557358599d@Public@CME" }, { Name: "美式", MaterialId: "5fd329e702af87557358599c@Public@CME" }, { Name: "天王星", MaterialId: "5fd329e702af8755735859a4@Public@CME" }, { Name: "柯达", MaterialId: "5fd329e702af87557358599b@Public@CME" }, { Name: "蜡纸底片", MaterialId: "5fd329e702af8755735859a5@Public@CME" }, { Name: "凹版照相", MaterialId: "5fd329e702af8755735859a2@Public@CME" }, { Name: "树脂", MaterialId: "5fd329e702af8755735859a3@Public@CME" }, { Name: "橙色天空", MaterialId: "5fd329e702af875573585996@Public@CME" }, { Name: "中性", MaterialId: "5fd329e702af875573585995@Public@CME" }, { Name: "幻紫", MaterialId: "5fd329e702af875573585994@Public@CME" }, { Name: "午后", MaterialId: "5fd329e702af87557358599a@Public@CME" }, { Name: "假日", MaterialId: "5fd329e702af875573585992@Public@CME" }, { Name: "黄昏", MaterialId: "5fd329e702af875573585999@Public@CME" }, { Name: "胡桃木", MaterialId: "5fd329e702af875573585991@Public@CME" }, { Name: "红杉", MaterialId: "5fd329e702af875573585998@Public@CME" }, { Name: "水墨", MaterialId: "5fd329e702af875573585993@Public@CME" }, { Name: "卷曲粉红", MaterialId: "5fd329e702af875573585997@Public@CME" }, { Name: "青山", MaterialId: "5fd329e702af87557358598c@Public@CME" }, { Name: "朋克", MaterialId: "5fd329e702af87557358598b@Public@CME" }, { Name: "青色", MaterialId: "5fd329e702af87557358598a@Public@CME" }, { Name: "城镇", MaterialId: "5fd329e702af875573585989@Public@CME" }, { Name: "小镇", MaterialId: "5fd329e702af875573585988@Public@CME" }, { Name: "珠光蓝", MaterialId: "5fd329e702af875573585987@Public@CME" }, { Name: "巧克力", MaterialId: "5fd329e702af875573585990@Public@CME" }, { Name: "自由蓝", MaterialId: "5fd329e702af87557358598f@Public@CME" }, { Name: "都市", MaterialId: "5fd329e702af87557358598e@Public@CME" }, { Name: "雪域森林", MaterialId: "5fd329e702af87557358598d@Public@CME" }, { Name: "橘光", MaterialId: "5fd329e702af875573585982@Public@CME" }, { Name: "蒙层", MaterialId: "5fd329e702af875573585981@Public@CME" }, { Name: "明亮", MaterialId: "5fd329e702af875573585985@Public@CME" }, { Name: "洛莫彩色", MaterialId: "5fd329e702af875573585980@Public@CME" }, { Name: "文艺", MaterialId: "5fd329e702af875573585984@Public@CME" }, { Name: "藏青", MaterialId: "5fd329e702af87557358597e@Public@CME" }, { Name: "录影带", MaterialId: "5fd329e702af87557358597f@Public@CME" }, { Name: "梦想家", MaterialId: "5fd329e702af87557358597c@Public@CME" }, { Name: "暗调", MaterialId: "5fd329e702af875573585986@Public@CME" }, { Name: "青柠", MaterialId: "5fd329e702af875573585983@Public@CME" }, { Name: "暗黑", MaterialId: "5fd329e702af875573585976@Public@CME" }, { Name: "初秋", MaterialId: "281921553743709738@Public@CME" }, { Name: "傍晚", MaterialId: "281921553743709742@Public@CME" }, { Name: "温暖", MaterialId: "281921553743709741@Public@CME" }, { Name: "冷光", MaterialId: "281921553743709740@Public@CME" }, { Name: "梦幻", MaterialId: "281921553743709737@Public@CME" }, { Name: "标准深", MaterialId: "5fd329e702af87557358597b@Public@CME" }, { Name: "倒叙", MaterialId: "5fd329e702af87557358597a@Public@CME" }, { Name: "仲夏", MaterialId: "5fd329e702af875573585979@Public@CME" }, { Name: "青春", MaterialId: "5fd329e702af875573585978@Public@CME" }, { Name: "老相片", MaterialId: "281921553743709733@Public@CME" }, { Name: "宁静", MaterialId: "381921553743709127@Public@CME" }, { Name: "古铜", MaterialId: "281921553743709739@Public@CME" }, { Name: "清晨", MaterialId: "381921553743709125@Public@CME" }, { Name: "藕荷", MaterialId: "281921553743709735@Public@CME" }, { Name: "自然", MaterialId: "381921553743709128@Public@CME" }, { Name: "早春", MaterialId: "281921553743709736@Public@CME" }, { Name: "薄暮", MaterialId: "381921553743709126@Public@CME" }, { Name: "金秋", MaterialId: "281921553743709734@Public@CME" }, { Name: "晨光", MaterialId: "381921553743709129@Public@CME" },];
具体效果可登录 腾讯制作云 进行查看，如下图：
image-filter-normal
示例：
const item = {id: "7edc76a8-1a28-4546-b0ca-fd7403660ca1",start_time: 0,duration: 63560,type: "video",section: { from: 0, to: 63560,},asset_id: "5f6464c6ccbc8d0001fc308b",width: 960,height: 540,position: { x: 480, y: 270,},operations: [ { type: "image_rotate", params: { angle: 0, }, }, { type: "image_filter_normal", //修改params值即可调整对应效果 params: { contrast: 100, //对比度 brightness: 0, //明亮度 saturation: 0, //饱和度 }, },],};
image-glshader
基础示例：
/** * 特效视频只能放到特效轨道上.注意特效必须覆盖其它素材。 * **/const track = { id: "61eed235-a61a-4ae0-baaf-49dda661c962", type: "frame", order: 1, items: [], subType: "shader",};
/**** * 特效元素 * **/const trackItem = { id: "03816c76-4ba0-48bd-b7c7-289f45002652", width: 960, //宽高取值与舞台保持一致 height: 540, //宽高取值与舞台保持一致 asset_id: "5f0aba91cb093b30566c5da9@Public@CME", start_time: 0, duration: 3000, type: "frame", operations: [ /** * 如果是组合特效，则有两个操作对象 * */ { type: "image_glshader", params: { name: "LightCircle", //导出替换值 }, // 注: 组合特效需要注意顺序，顺序改变导出效果会有变化 // { // type: "image_glshader", // params: { // name: "ScBlurThreeY", //导出替换值 // }, // }, // { // type: "image_glshader", // params: { // name: "ScBlurThreeX", //导出替换值 // }, // }, ], /*** * 由于部分滤镜特效是由多种操作组合成，例如注释内的高斯模糊效果， * 所以预览值和导出值有可能不一样。预览值表示可以在预览组件上看的效果。 * **/ shaderName: "LightCircle", //预览值 // shaderName: "ScBlurThree" // 模糊};
track.items.push(trackItem)
/** * 最终数据结构 * */const data = [trackItem]
所有的特效描述：
| 预览名称 | 描述 | 组合 |
| LightCircle | 光斑 | LightCircle |
| Heart | 爱心 | Heart |
| Shining | 光芒四射 | Shining |
| Blink | 亮晶晶 | Blink |
| Bubble | 泡泡 | Bubble |
| Snow | 飘雪 | Snow |
| Rain | 雨滴 | Rain |
| Duotone | 双色调 | Duotone |
| FlowingLight | 流光 | FlowingLight |
| ChasingLight | 逐光 | ChasingLight |
| Rainbow | 彩虹 | Rainbow |
| Multicoloured | 炫彩 | Multicoloured |
| Shake | 抖动 | Shake |
| Swing | 摇晃 | Swing |
| SoulOut | 灵魂 | SoulOut |
| Hallucination | 幻觉 | Hallucination |
| ShineWhite | 闪白 | ShineWhite |
| Glitch | 故障 | Glitch |
| OldVideo | 老电影 | OldVideo |
| Mirror | 镜像 | Mirror |
| ScBlurThree | 模糊分屏 | ScBlurThreeY、ScBlurThreeX |
| ScGrayThree | 黑白三屏 | ScGrayThree |
| ScTwo | 两屏 | ScTwo |
| ScThree | 三屏 | ScThree |
| ScFour | 四屏 | ScFour |
| ScSix | 六屏 | ScSix |
| ScNine | 九屏 | ScNine |
具体效果可登录 腾讯制作云 进行查看，如下图：
image_lens_stretch格式描述：
const op = {type: "image_lens_stretch",transformName: "xxx", //【必选】【string】params: { name: "xxx", // 【必选】【string】 start_time: 0, // 【可选】【int】 存在且大于等于0，相对于item时间，效果开始时间，默认0 duration: 0, // 【必选】【int】 存在且大于0，效果持续时间 from_center: [], // 【可选】【float 数组】 初始状态中心点，size=2，[x, y]，取值>=0，默认0.5 from_scale: [], // 【可选】【float 数组】 初始状态大小， size=2，[width, height]，取值>=0，默认1 to_center: [], // 【可选】【float 数组】 目标状态中心点，size=2，[x, y]，取值>=0，默认0.5 to_scale: [], // 【可选】【float 数组】 目标状态大小， size=2，[width, height]，取值>=0，默认1},};// transformName-params.name
// 通用运动动画// ZoomOut-Stretch 推远// ZoomIn-Stretch 拉近// MoveLeft-Transform 左移// MoveRight-Transform 右移// MoveDown-Transform 上移// MoveUp-Transform 下移
// 文字动画// FeatherRight-FeatherRight 羽化向右展开// FeatherLeft-FeatherLeft 羽化向左展开// Typewriter-Typewriter 打字机// WipeRight-WipeRight 向右擦除// WipeLeft-WipeLeft 向左擦除
基础示例：
/**** * 运动元素 * 这里以图片运动为例 * **/const trackItem = [ { id: "5e08d7bb-a3df-4721-a9dc-2d7cf1ffb7fe", type: "video", order: 0, items: [ { id: "94ea0aea-ad23-4e1a-aae1-52f1f8bc5805", start_time: 0, duration: 8080, type: "image", asset_id: "5f3cca3bb439500001b2edd8", filter_asset_id: "", operations: [ { type: "image_lens_stretch", transformName: "ZoomOut", params: { name: "Stretch", duration: 8100, start_time: 0, from_scale: [2.5, 2.5], to_scale: [1.1, 1.1], from_center: [0.5, 0.5], to_center: [0.5, 0.5], }, }, { type: "image_rotate", params: { angle: 0, }, }, ], width: 673, height: 540, position: { x: 480, y: 270, }, section: { from: 0, to: 8080, }, transitionFE: { start: { name: "", duration: 0, }, end: { name: "", duration: 0, }, }, transition: [], }, ], },];
/** * 最终数据结构 * */const data = [trackItem];
合成协议助手
CMEUtils
YJPlayer.Helper.CMEUtils 协助用户处理媒资素材。
auth
YJPlayer.Helper.CMEUtils.auth在远端登录，以便获取资源，再次调用可以新增登录角色。注意没有登录则以下部分接口无法使用，登录后再调用以下方法。输入参数
| 参数 | 描述 | 类型 | 必填 |
| sign | 身份验证签名，详情请参见 签名概述 | string | 是 |
返回值
type result = Promise
logout
登出输入参数
空。返回值
空。
createTrackItem
创建 轨道元素(trackItem) 数据，可以直接添加到 轨道(track) 中使用。输入参数
| 参数 | 描述 | 类型 | 必填 |
| materialIds | 媒资 ID | string[] | 是 |
返回值
返回一个基础的视频合成协议元素，详情请参见 轨道元素。
type result = Promise;
示例
/** * @auth 登录方法，保证可以调用CME，WebAPI。 * @param sign {{string}} 签名串。 **/YJPlayer.Helper.CMEUtils.auth({ sign: "your_sign",}) .then(() => { console.log("登录成功"); }) .catch((err) => { console.error("登录异常"); });
/** * @createTrackItem 创建轨道元素协议数据。 * @param asset_ids {{string[]}} 媒资ID数组 * @param options {{object}} 可选参数 * */YJPlayer.Helper.CMEUtils.createTrackItem(["materialId1", "materialId2"], {}) .then((data) => { console.log("创建成功", data); }) .catch((err) => { console.log("创建失败", err); });
Track & TrackItem
YJPlayer.Helper.Track 和 YJPlayer.Helper.TrackItem 两种操作场景，包含方法如下：
| 操作场景 | 命名空间 | 描述 |
| Track 操作场景 | create | 创建一个包含基础协议格式的轨道数据 |
| | append | 添加轨道元素方法 |
| | sort | 按照我们预设层级逻辑为轨道重新排列 |
| | addMosaic | 添加马赛克 |
| | addSubtitle | 添加字幕 |
| TrackItem 操作场景 | create | 创建非素材类型的轨道元素 |
| | crop | 对素材进行裁剪 |
Track 操作场景
create输入参数
| 参数 | 描述 | 类型 | 必填 |
| options | 轨道设置，具体类型请参见 轨道描述 | {type:’video’/’audio’/….} | 是 |
| index | 轨道层级 | number | 否，默认从 0 开始自增。注：轨道有层级顺序，参考 sort 说明。 |
返回值
合成协议的基础请参见 轨道数据。
interface Track { id: string; type: string; order: number; items: any[];}
type result = Promise
示例
const imageTrack = YJPlayer.Helper.Track.create({ type: "image",});console.log(imageTrack);
append输入参数
| 参数 | 描述 | 类型 | 必填 |
| materialId | 媒资 ID | string | 是 |
| trackItem | 轨道元素 | object | 是 |
| insertIndex | 插入位置，默认插入队尾 | number | 否 |
返回值
已填充元素的轨道数据。
type result = Track;
示例：
const imageTrack = YJPlayer.Helper.Track.create({type: "image",});const item = {};YJPlayer.Helper.CMEUtils.createTrackItem(["materialId"], {}).then((trackItem) => {Track.append(imageTrack, trackItem);console.log(imageTrack);});
sort
轨道排序方法，会将传入轨道设置到正确的层级上，由于展示问题，部分轨道应该被摆到合适到的位置才会有效果，例如字幕应该是处于靠前位置的轨道。以下是轨道权重，如并列放置则可以随意调整层级：
- title- frame- subtitle- image/audio/video
输入参数
| 参数 | 描述 | 类型 | 必填 |
| tracks | 包含 轨道 数据的数组 | object | 是 |
返回值已排序的轨道数组。
type result = Track[];
示例
const imageTrack = YJPlayer.Helper.Track.create({ type: "image",});const videoTrack = YJPlayer.Helper.Track.create({ type: "video",});const subtitleTrack = YJPlayer.Helper.Track.create({ type: "subtitle",});
const sortedData = YJPlayer.Helper.Track.sort([ imageTrack, videoTrack, subtitleTrack,]);
/** * subtitle会被排到最前面 * */console.log(sortedData);
addMosaic
给合成协议添加马赛克。输入参数
| 参数 | 描述 | 类型 | 必填 |
| params | 左上角开始坐标位置(x,y)，裁剪矩行区域 (width,height)，{x,y,width,height} | object | 是 |
| fusionData | 包含 轨道 的数组 | object | 是 |
返回值
已经添加过马赛克轨道的数据协议。
type result = Track[];
示例
/** * 先获取一段已有的合成数据。 */const fusiontData = [ /* * 一段轨道数据 **/];/** * 从视频的左上角位置开始，位于(10,10)， * 宽高为(50,50)的部分打上马赛克。 */const result = YJPlayer.Helper.Track.addMosaic( { x: 10, y: 10, width: 50, height: 50, }, fusiontData);console.log(result);
addSubtitle
添加字幕轨道功能。输入参数
| 参数 | 描述 | 类型 | 必填 |
| fusionData | 包含 轨道 的数组 | object | 是 |
| param | 起始时间，持续时间，文字内容 {start_time，duration，text} | object | 是 |
| styles | 文字样式 {font_size,font_color,align,italic,background_color,background_alpha,height}，请参见 示例 | object | 否 |
返回值
已经添加过字幕轨道的数据协议。
type result = Track[];
示例
/** * 先获取一段已有的合成数据。 */const fusiontData = [ /* * 一段轨道数据 **/];/*** * * 视频第一秒开始，字幕持续1秒，字幕内容是“这是字幕1”， * 以此类推 */const subtitles = [ { duration: 1000, //持续时间 ，单位ms text: "这是字幕1", start_time: 1000, //开始时间点.单位ms }, { duration: 1000, text: "这是字幕2", start_time: 3000, },];const result = YJPlayer.Helper.Track.addSubtitle(fusiontData, subtitles, { font_size: 12, //文字大小 ，单位px font_color: "#cb0000", // 文字颜色 align: "center", //"center" | "left" | "right"s italic: false, // 文字斜体 background_color: "#000", //字幕背景 background_alpha: 50, //背景透明度0-100 height: 100, //高度 单位像素});console.log(result);
TrackItem 操作场景
create
创建非素材类型的轨道元素，需要传入相关参数。输入参数
| 参数 | 描述 | 类型 | 必填 |
| type | 元素类型 | string | 是 |
| material_type | 元素的子类型（同一个元素类型有不同的子类型） | string | 是 |
| start_time | 剪辑时间线上的开始时间 | number | 是 |
| duration | 剪辑时间线上的持续时间 | number | 是 |
| width | 元素在舞台中展示的宽度 | number | 是 |
| height | 元素在舞台中展示的高度 | number | 是 |
| position | 元素在舞台中的位置 | object { x: number; y: number;} | 是 |
| section | 元素片段时间线 | object { from: number; to: number;} | 音频、视频、特效等元素必填 |
| text | 元素文本内容 | string | 字幕和文本元素必填 |
| content | 元素辅助性元数据内容 | object | 文本和自由文字元素必填 |
| style_id | 字幕样式 ID | string | 仅字幕元素必填 |
| asset_url | 元素媒资 URL | string | 非文本和自由文字元素必填 |
| thumbnail_url | 元素媒资 URL，提供裁剪尺寸时可用于内部优化 | string | 否 |
| asset_id | 元素媒资 ID | string | 否 |
返回值
携带裁剪操作数据的轨道元素对象，完整数据结构请参见 合成协议。
/** * @create 创建轨道元素协议数据。 * @param options {{object}} 可选参数 * */const trackItem = YJPlayer.Helper.TrackItem.create({ type: "video", material_type: "video", start_time: 0, duration: 10000, width: 960, height: 540, position: { x: 480, y: 270, }, section: { from: 0, to: 10000, }, asset_url: "https://xxx.xxx.mp4",});
crop
裁剪视频元素,需要传入舞台相关参数。输入参数
| 参数 | 描述 | 类型 | 必填 |
| trackItem | 轨道元素 | object | 是 |
| options | 裁剪区域中心点位置，裁剪大小 | object: { x:number , y:number, width:number, height:number } | 是 |
返回值
携带裁剪操作数据的轨道元素对象，完整数据结构请参见 轨道元素。
type result = {id: string;asset_id: string;// ....operation: any[];};
示例
/** * 裁剪的必须是视频元素 * @createTrackItem 创建轨道元素协议数据。 * @param asset_id {{string}} 媒资ID * @param options {{object}} 可选参数 * */YJPlayer.Helper.CMEUtils.createTrackItem(["materialId"], {}) .then((data) => { YJPlayer.Helper.TrackItem.crop(data, { crop: { x: 20, y: 20, width: 100, height: 100, }, stage, }); console.log("裁剪完成", data); }) .catch((err) => { console.log("数据拉取失败", err); });
典型案例
多个视频首尾衔接
/** * 传入轨道元素数组，返回一段将传入轨道元素内容首位衔接的完整轨道数据。主要有以下步骤: * 1. 创建一个轨道。 * 2. 元素添加到轨道上，默认是首尾衔接填充轨道内容。 * 3. 得到一个可以播放的视频合成协议。 */async function demo1() { const trackItems = await YJPlayer.Helper.CMEUtils.createTrackItem([ "materialId1", "materialId2", "materialId3", ]); const track = YJPlayer.Helper.Track.create({ type: "video", }); trackItems.forEach((element) => { YJPlayer.Helper.Track.append(track, element); }); console.log("track:", track); const resultData = [track]; console.log(resultData); return resultData;}
裁剪视频
/** * 裁剪视频步骤: * 1. 创建一个轨道。 * 2. 得到一个视频/图片轨道元素。对其使用裁剪方法。 * 3. 裁剪后的元素添加到轨道内。 * 4. 得到一个可以播放的视频合成协议。 */async function demo2() { const trackItems = await YJPlayer.Helper.CMEUtils.createTrackItem([ "materialId1", "materialId2", "materialId3", ]); const track = YJPlayer.Helper.Track.create({ type: "video", }); /** * 在宽高为960,540的舞台上 * 从视频的左上角位置(100,100) * 截取宽50 ,高50的画面 */ const cropedElement = YJPlayer.Helper.TrackItem.crop(trackItems[0], { rect: { x: 100, y: 100, width: 50, height: 50, }, stage: { width: 960, height: 540, }, }); YJPlayer.Helper.Track.append(track, cropedElement); const resultData = [track]; console.log(resultData); return resultData;}
使用公共滤镜
/** * 对一个已有的视频/图片轨道元素应用一个lut滤镜素材: * 1. 通过素材ID创建视频/图片元素 * 2. 应用lut滤镜效果 * 3. 创建轨道，并装填轨道 * 4. 得到一个可预览协议 **/async function demo0() { const trackItems = await YJPlayer.Helper.CMEUtils.createTrackItem([ "materialId1", "materialId2", "materialId3", ]); for (const i = 0; i < trackItems.length; ++i) { /** * 胶片滤镜应用，胶片滤镜ID 为 '5fd329e702af8755735859a1@Public@CME' * 全部滤镜查看请到滤镜部分查看 ***/ await YJPlayer.Helper.TrackItem.lut( trackItems[i], "5fd329e702af87557358599f@Public@CME" ); }
/* 设置滤镜强度，通过 filter_strength 字段 https://vs-cdn.tencent-cloud.com/sdk/yj-player-1.4.10.js 版本以上支持 { "type": "image_filter_lut", "params": { "name": "yj_templ_lut_87", "image_url": "https://1810000000.vod2.myqcloud.com/b64e98acvodcq1810000000/thumbnail/filter/yj_templ_lut_87.png", "filter_strength": 100 } } */
const track = YJPlayer.Helper.Track.create({ type: "video", }); trackItems.forEach((element) => { YJPlayer.Helper.Track.append(track, element); }); console.log("track:", track); const resultData = [track]; console.log(resultData); return resultData;}
视频添加转场
/*** * 添加视频转场: * 1. 获取一段已有的视频合成协议。 * 2. 向其中添加一个视频转场。 * 3. 得到一个已经处理好的视频合成协议。 */async function demo3() { /** * 先获取一段已有的合成数据。 */ const fusionData = demo1(); /** * 创建一个公共的视频转场元素,这里使用的是九宫格效果。 * 查阅转场元素涉及相关素材ID请到转场部分查看。 * */ const transition = await YJPlayer.Helper.CMEUtils.createTrackItem([ "381921553743709252@Public@CME", ]); /** * 将转场添加到视频轨道的第一个视频片段后。 */ YJPlayer.Helper.Track.append(fusionData[0], transition[0], 1); return fusionData;}
视频打马赛克
/*** * 对合成视频部分打马赛克。 * 1. 获得一个合成协议。 * 2. 调用轨道场景内添加马赛克方法。 * 3. 得到一个已经处理好的视频合成协议。 */async function demo3() { /** * 先获取一段已有的合成数据。 */ const fusionData = demo1(); /** * 从视频时间线起始点打上马赛克。 * 坐标位于(10,10)的位置 * 持续时长为5s * 马赛克宽高为(200,200) */ const result = YJPlayer.Helper.Track.addMosaic( fusionData, { start_time: 0, duration: 5000, degree: 50, x: 10, y: 10, width: 200, height: 200, }, 0 // 0为马赛克效果，1为高斯模糊效果 ); console.log(result); return result;}
设置默认字幕
/*** * 添加默认字幕: * 1. 获取一段已有的视频合成协议。 * 2. 调用轨道场景内添加字幕方法。 * 3. 得到一个已经处理好的视频合成协议。 */async function demo4() { const trackItems = await YJPlayer.Helper.CMEUtils.createTrackItem([ "materialId1", "materialId2", "materialId3", ]); /** * 先获取一段已有的合成数据。 */ const fusionData = demo1(trackItems);
/*** * * 视频第一秒开始，字幕持续1秒，字幕内容是“这是字幕1”， * 以此类推 */ const subtitles = [ { duration: 1000, //持续时间 ，单位ms text: "这是字幕1", start_time: 1000, //开始时间点.单位ms }, { duration: 1000, text: "这是字幕2", start_time: 3000, }, ]; const result = YJPlayer.Helper.Track.addSubtitle(fusionData, subtitles); console.log(result); return result;}
序列帧-贴片/序列帧-文字/序列帧-特效
/** * 1. 创建一个对应类型轨道 * 2. 通过指定素材ID创建轨道元素，【注意】此功能对象不可进行序列化，对象中包含BLOB类型数据 * 3. 装填轨道 * 4. 得到一个可预览协议 **//** * 序列帧-贴片 */async function demo9() { // image-sequence const track = YJPlayer.Helper.Track.create({ type: "image", });
const trackItem = await YJPlayer.Helper.TrackItem.createSequence( "608a7497c1af830001c9292e@Public@CME", //素材ID yjPlayer // yjPlayer 实例，参考【播放器】部分 // 可选参数 // { // width?: number // height?: number // position?: { // x: number // y: number // } // start_time?: number // duration?: number // } );
YJPlayer.Helper.Track.append(track, trackItem); const resultData = [track]; return resultData;}
/** * 序列帧-文字 */async function demo10() { // title-sequence_title const track = YJPlayer.Helper.Track.create({ type: "title", }); const trackItem = await YJPlayer.Helper.TrackItem.createSequence( "608bc4d689ea7200013ff244@Public@CME", //素材ID yjPlayer //yjPlayer的实例 // { // width?: number // height?: number // position?: { // x: number // y: number // } // start_time?: number // duration?: number // content?: 文字可用的配置项，参考 advanced_title // } ); YJPlayer.Helper.Track.append(track, trackItem); const resultData = [track]; return resultData;}
/** * 序列帧-特效 */async function demo11() { // frame-sequence_effect // subType: shader
const track = YJPlayer.Helper.Track.create({ type: "shader", }); const trackItem = await YJPlayer.Helper.TrackItem.createSequence( "60ebfe3852840e0001b4836c@Public@CME", //素材ID yjPlayer //yjPlayer的实例 // { // start_time?: number // duration?: number // } ); YJPlayer.Helper.Track.append(track, trackItem); const resultData = [track]; return resultData;}
对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家
腾讯云限时活动1折起，即将结束： 马上收藏
同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠
阿里云解决方案也看看？： 点击对比阿里云的解决方案
- 0人点赞 -
相关推荐
腾讯云实时互动教育版产品动态_音视频解决方案_同尘科技
腾讯云多人音视频房间SDK多人音视频房间 SDK 2.0版本发布和推荐升级公告_音视频解决方案_同尘科技
腾讯云多人音视频房间SDKSDK2.0版本升级指引_音视频解决方案_同尘科技
暂无评论，你要说点什么吗？