Three.js 检测到视频可以在移动设备上播放

Question

我在球体纹理上使用视频并尝试仅在视频加载后显示球体。在移动设备上，我总是在加载视频时看到一个黑色球体，几秒钟后视频开始播放。

有没有办法在显示之前检测球体上的视频是否真的在播放？

      if(!video){
        video = document.createElement( 'video' );
        video.width = 2048;
        video.height = 1024;
        //video.autoplay = true;
        video.loop = true;
        video.crossOrigin = '';
        video.preload = 'auto';
   }

// video.src = cdnPrefix + "/"+ sceneObject.video;
    video.src = cdnPrefix + "/uploads/out3_8.mp4";





    geometry = new THREE.SphereGeometry( 500, 60, 40 );
    var texture = new THREE.VideoTexture( video );
    texture.minFilter = THREE.LinearFilter;

    var material   = new THREE.MeshBasicMaterial( { map : texture } );
    // material.side = THREE.BackSide;

    panoVideoMesh = new THREE.Mesh( geometry, material );
    panoVideoMesh.scale.x = -1;
    panoVideoMesh.rotation.y = Math.PI / 2;

    if(!isMobile)
        panoVideoPlay();
    else
        window.addEventListener('touchstart', function videoStart() {
            panoVideoPlay();
            this.removeEventListener('touchstart', videoStart);
        });

    scene.add( panoVideoMesh );
    panoVideoMesh.visible = false;

}

 function panoVideoPlay(){
  video.load();

    video.addEventListener('canplay',function(){
        scene.remove(box);
        panoVideoMesh.visible = true;
        video.play();
});

}

Answer 1

我觉得你可以过得去 video.readyState是真还是假

视频标签Html5中还有很多其他有用的功能和属性，你可以在这里查看http://www.w3schools.com/tags/ref_av_dom.asp

Three.js 检测到视频可以在移动设备上播放

Three.js detect video is ready to play on mobile

javascript

video

jquery

html5-video

three.js