ThreeJS切换视频纹理性能

Question

嗨， 我将视频纹理映射到ThreeJs中的球体上。我在点击时动态更改视频源以显示不同的视频。

代码运行并切换源，但在不同设备上进行更新需要不同的时间。这是一种滞后。切换源，然后需要X毫秒来更新到新视频。在此期间，旧视频继续播放。所以我猜它可能是某种视频内存的东西？

滞后是这样的：

1. 桌面PC Chrome - instant exchange
2. Macbook Pro 13 Chrome - 0.2 seconds滞后
3. Nexus 5 Chrome - 0.5 seconds滞后
4. Iphone 7 Safari - 1 second滞后

我正在使用preloadJS预加载所有视频，但这仍然没有改变任何内容。在移动设备上使用较小的视频（在示例中实现）也没有帮助。

基本上我这样做：

this.video = document.createElement('video');
this.video.setAttribute('playsinline', '');
this.video.muted = true;
this.video.loop = true;
this.video.src = 'img/Room1Mobile.mp4';
this.video.crossOrigin = '';
this.video.play();

this.videoTexture = new THREE.Texture(this.video);
this.videoTexture.minFilter = THREE.LinearFilter;
this.videoTexture.magFilter = THREE.LinearFilter;
this.videoTexture.format = THREE.RGBFormat;

this.sphereMat.side = THREE.BackSide;
this.sphereMat.transparent = true;
this.sphereMat.opacity = 1;

this.cube = new THREE.Mesh(this.cubeGeometry, this.sphereMat);
this.cube.name = "videoGlobe";
this.scene.add(this.cube)

稍后我会像这样切换源：

this.video.src = "img/Room2.mp4";
this.video.load();
this.video.play();

据我所知，这个问题很难调试，但仍希望有人能给我一个提示：）

这里有一个完整的demo。