javascript - 如何在 Konva 阶段添加视频(.mp4、.mov)？

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