如何使用leaferjs播放视频？

[overdev-l]

[leaferjs]

我们后面计划会增加视频组件。

目前可以通过自定义组件 或Canvas 组件同步视频帧： http://localhost:5173/ui/guide/display/Canvas.html https://leaferjs.com/ui/guide/display/Custom.html

再通过AnimateEvent.FRAME事件，forceUpdate('fill') 每一帧的画面： https://leaferjs.com/ui/guide/animate/ https://leaferjs.com/ui/guide/property/layer.html#forceupdate

[overdev-l]

如果使用canvas同步视频帧，声音源的播放世纪还是video标签吧

[leaferjs]

对的，可以参考目前网络上canvas播放视频的方法

[JazzOne]

最近刚做了类似需求，简单贴下代码抛砖引玉

const renderVideo = (src: string) => { const canvas = new Canvas({ width: 750, height: 1334 }); const { context } = canvas;

const video = document.createElement("video"); video.crossOrigin = "anonymous"; video.src = src; video.autoplay = true; video.muted = true; video.loop = true;

if (video.paused) { video.play(); } leafer.add(canvas);

(function draw() { context!.drawImage(video, 0, 0, 750, 1334); canvas.paint(); requestAnimationFrame(draw); })(); };