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

Question

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

How would I add a video (.mp4, .mov) at Konva stage?

javascript

reactjs

konvajs

react-native

react-redux