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