@ 编辑框架/要素
与 Editframe 一起构建视频构成的Web 组件 SDK.
安装
npm install @editframe/elements
一次性导入包以注册其自定义元素 :
import "@editframe/elements";
回放速度和源代码
ef-video 财务报告和审定财务报表 ef-audio 支助 playback-rate (贾瓦脚本财产)
playbackRate) (中文(简体) ). 默认是 1; 支持的费率为 0.25 结束 4, (中文(简体) ),
包容性。 音频在播放和导出时保持其投出.
<ef-configuration id="configuration">
<ef-timegroup id="cut" mode="fixed" duration="4s"
style="position: relative; width: 640px; height: 360px">
<ef-video id="clip" src="/take.mp4" sourcein="2s" sourceout="10s"
playback-rate="2" style="width: 100%; height: 100%"></ef-video>
</ef-timegroup>
</ef-configuration>
此播放源秒 2 结束 10 在四个组成秒.
sourcein编号 :sourceout 财务报告和审定财务报表 trimstart编号 :trimend 参考源时间。 无
一种明显的叶子 duration中,修剪的源持续时间除以
费率。 叶子 duration 时间和消耗量
duration × playbackRate 源秒,被可用媒体封顶.
数字求取时间和 currentTime 还在组成秒.
直接附加一个用于播放的控制器, 然后调用 play() 从用户获取
手势 :
const configuration = document.querySelector("#configuration");
const cut = document.querySelector("#cut");
const playback = configuration.attachPlayback(cut);
// In a play button's click handler:
playback.play();
// Seeking during playback keeps the controller playing from the new time.
await playback.seek(1.5);
无效或缺失 playback-rate 属性解析到 1指定
无效 playbackRate 属性值抛出 RangeError 换句话说.
音频淡出
设定 volumeAtTime 作为音频或视频元素上的JavaScript属性. 这个
接收 剪辑本地构成秒数字 : 0 是剪辑的开始,
无论来源修饰或位于父时间组中。 还原 a
乘数从 0 改为 1;乘以元素的 volume。 。 。 .
限制范围外的有限值,使用非无限值 1。 。 。 .
const clip = document.querySelector("#clip");
clip.volume = 0.8;
clip.volumeAtTime = (localTime) =>
Math.max(0, Math.min(1, localTime / 0.25, (4 - localTime) / 0.25));
这消退了四秒钟的剪辑 超过四分之一秒。 导出 为每个输出音频样本评价信封; 回放平滑 音量更新。 保持回调决定力 这样寻求和输出 制作同样的信封。 回调不是 HTML 属性,不能 被序列化为已保存的标记字符串.
导出
创建孤立的渲染克隆以导出而不寻求活性
组成. createRenderClone 保留 volumeAtTime 随叫随到
与媒体属性.
import { createRenderClone, renderTimegroupToVideo } from "@editframe/elements";
const handle = await createRenderClone(document.querySelector("#cut"), {
width: 640,
height: 360,
isolateMedia: true,
});
try {
const result = await renderTimegroupToVideo(handle.clone, {
width: 640,
height: 360,
fps: 30,
});
const mp4 = new Blob([result.buffer], { type: result.mimeType });
// Save or upload mp4 using your application's export flow.
} finally {
handle.dispose();
}
导出需要有一个具有相关WebCodecs支持的浏览器. 期间 开发,热重装可以从旧模块中留下自定义元素 实例; 开始“ 重新装入页面以导出” 的导出错误表示 a 需要重新装入完整页面.
文本抓取保存计算出的默认值, 如 line-height: normal, (中文(简体) ),
包括从父母继承的重排。 你仍然可以设置一个明确的
设计时的行高; 1.15 这不是SDK的要求。 字体 URL 单位
样式表相对于声明它们的样式表进行解析,所以
这些样式表和字体文件必须可以访问渲染页面.