[英]How would I add a video (.mp4, .mov) at Konva stage?
I want to add a video object, just like I add an image at Konva stage. 我想添加视频对象,就像在Konva阶段添加图像一样。 The problem is when I add a video (a mp4 / mov file), it does not play that video.
问题是当我添加视频(mp4 / mov文件)时,它无法播放该视频。 When I resize my browser window, I can see the video frame is moving.
调整浏览器窗口大小时,可以看到视频帧正在移动。 But when the browser window is not resizing, the video does not play.
但是,当浏览器窗口未调整大小时,视频将无法播放。 I am using React Konva.
我正在使用React Konva。
Konva is not designed to work with video. Konva不适用于视频。 But you can show video as image element, and then frequently update layer:
但是您可以将视频显示为图像元素,然后经常更新图层:
class MyVideo extends React.Component {
constructor(...args) {
super(...args);
const video = document.createElement('video');
video.src = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
this.state = {
video: video
};
video.addEventListener('canplay', () => {
video.play();
this.image.getLayer().batchDraw();
this.requestUpdate();
});
}
requestUpdate = () => {
this.image.getLayer().batchDraw();
requestAnimationFrame(this.requestUpdate);
}
render() {
return (
<Image
ref={node => { this.image = node; }}
x={10} y={10} width={200} height={200}
image={this.state.video}
/>
);
}
}
Demo: http://jsbin.com/haxufutaxe/1/edit?js,output 演示: http : //jsbin.com/haxufutaxe/1/edit?js,输出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.