如何在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