Three.js檢測視頻已準備好在移動設備上播放

我在使用球體貼圖上的視頻並嘗試僅在視頻載入後才顯示球體。在移動設備上，當視頻加載完成後，我會收到一個黑色的球體，幾秒鐘後視頻開始播放。Three.js檢測視頻已準備好在移動設備上播放

有無論如何檢測球體上的視頻是否在展示前實際播放？

 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(); 
});

}

來源

2016-03-03 user5839

我認爲你可以通過 video.readyState是真的還是假

還有許多其它有用的功能和HTML 5視頻標籤的屬性，你可以在這裏查詢http://www.w3schools.com/tags/ref_av_dom.asp

來源

2016-03-04 04:14:19 Nukes

ReadyState是一個數字。它可以玩的時候是4。我已經嘗試過使用它，它也是一樣的，黑色的2-3秒在手機上。 – user5839

從你的功能panoVideoPlay你應該刪除video.load和video.play（）..... 使用這兩個函數上面放置video.src ...這樣的視頻加載儘可能快甚至在你的模型之前初始化就緒狀態4表示HAVE_ENOUGH_DATA - 有足夠的數據可用於開始播放 – Nukes

Three.js檢測視頻已準備好在移動設備上播放

回答

相關問題