@clayzo/canvaskit-player(英语:canvaskit-player) 互联网电影数据库(imdb)上"canvaskit"的资料(英文)

完全忠诚的克莱佐玩家. CanvasKit — Skia 编译为 WASM, 相同 构建视频导出运行——从而绘制出引擎能表达出的一切.

npm i @clayzo/canvaskit-player

import { createPlayer } from '@clayzo/canvaskit-player';

const player = await createPlayer({ canvas, document });
player.play();

同调用 @clayzo/webgl-player,所以互换是导入中的一个词.

React and Next 客户端可以使用可选客户端的切入点 :

import { ClayzoPlayer } from '@clayzo/canvaskit-player/react';

export function Hero() {
  return <ClayzoPlayer document={document} poster="/hero.poster.webp" posterTick={240} label="A cube folding into the logo" />;
}

也一样 poster, (中文(简体) ), posterTick, (中文(简体) ), autoplay, (中文(简体) ), reducedMotion, (中文(简体) ), label, (中文(简体) ), decorative 财务报告和审定财务报表 fallback 道具为 @clayzo/webgl-player/react,并仅在玩家靠近取景口时加载.

~ 2,535 KB Brotli (韩语)大部分是斯基亚 如果这是负担得起的,这是 要达到的渲染器:通过构造和观众所看到的是正确的 无法从出口产品中漂移,因为它们是相同的代码.

斯基亚从哪里来

与发光器不同,8 MB 二进制不能被烤入捆- base64 将是 JavaScript 的 10 MB 在第一个框架之前进行剖析 。 没错 相反, 默认从一个版本锁定的 CDN 获取 :

https://unpkg.com/[email protected]/bin/full

刻意用一个准确的版本。 这个渲染器是写在上面的 建筑的行为,一个CDN 悄悄地为新斯基亚服务 是一种忠诚的改变 没有人要求.

自我主机——在防火墙后,在严格的CSP下,或者干脆不想要 在关键道路上依赖第三方:

npm i -D [email protected]
cp node_modules/canvaskit-wasm/bin/full/canvaskit.{js,wasm} public/canvaskit/

await createPlayer({ canvas, document, canvasKitUrl: '/canvaskit' });

需要两个文件 满 具体建造:只提供斯科特船 那边 还有Lottie节点的文件需要它.

字体

await createPlayer({
  canvas,
  document,
  onPrewarm: (result) => {
    if (result.unresolvedFamilies.length > 0) {
      console.warn('no font for:', result.unresolvedFamilies.join(', '));
    }
  },
});

值得连接。 无法装入器提供的字体不会丢出也不会丢出 替代——案文完全不依靠它. onPrewarm 实值 在开发中捕捉到的区别 和运输的空白 头条.

在两个造物器之间进行选择

见 @clayzo/animation是因为 docs/renderers.md。用这个当您 无法提前列出文档——设计工具、编辑器预览、 由用户撰写的作品画廊——或何时 @clayzo/webgl-player是因为 checkCoverage 说 文档需要它.