Three.js 检测到视频可以在移动设备上播放
Three.js detect video is ready to play on mobile
我在球体纹理上使用视频并尝试仅在视频加载后显示球体。在移动设备上,我总是在加载视频时看到一个黑色球体,几秒钟后视频开始播放。
有没有办法在显示之前检测球体上的视频是否真的在播放?
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();
});
}
我觉得你可以过得去
video.readyState是真还是假
视频标签Html5中还有很多其他有用的功能和属性,你可以在这里查看http://www.w3schools.com/tags/ref_av_dom.asp
我在球体纹理上使用视频并尝试仅在视频加载后显示球体。在移动设备上,我总是在加载视频时看到一个黑色球体,几秒钟后视频开始播放。
有没有办法在显示之前检测球体上的视频是否真的在播放?
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();
});
}
我觉得你可以过得去 video.readyState是真还是假
视频标签Html5中还有很多其他有用的功能和属性,你可以在这里查看http://www.w3schools.com/tags/ref_av_dom.asp