如何在 Konva 舞台上添加视频（.mp4、.mov）？答案

【问题标题】：How would I add a video (.mp4, .mov) at Konva stage?如何在 Konva 舞台上添加视频（.mp4、.mov）？
【发布时间】：2017-10-13 01:03:12
【问题描述】：

我想添加一个视频对象，就像我在 Konva 舞台上添加一个图像一样。问题是当我添加视频（mp4 / mov 文件）时，它不会播放该视频。当我调整浏览器窗口的大小时，我可以看到视频帧正在移动。但是当浏览器窗口没有调整大小时，视频不会播放。我正在使用 React Konva。

【问题讨论】：

标签： javascript reactjs react-native react-redux konvajs

【解决方案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

【讨论】：

嗨拉夫顿，谢谢。有效。但是，如果我想添加 GIF / APNG，我将如何添加它？我会以相同的方式添加视频吗？还是像添加常规图像一样添加视频？如果我像您在此处添加视频一样添加 APNG / GIF，则动画不起作用。它只显示第一个静态帧。如果添加，只是一个图像，APNG / GIF 的动画会起作用吗？