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