Question

我想添加一个视频对象，就像我在Konva阶段添加图像一样。问题是当我添加视频（mp4 / mov文件）时，它不播放该视频。当我调整浏览器窗口的大小时，我可以看到视频帧正在移动。但是当浏览器窗口未调整大小时，视频无法播放。我正在使用React Konva。

Answer 1

Konva不适用于视频。但是你可以将视频显示为图像元素，然后经常更新图层：

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}
            />
        );
    }
}

演示：http://jsbin.com/haxufutaxe/1/edit?js,output

如何在Konva阶段添加视频（.mp4，.mov）？

1 个答案: