起因是希望在gitee上部署靜態(tài)網(wǎng)站，利用three.js VideoTexture 環(huán)境貼圖播放視頻。
但是試了多幾次 mp4均提示404，資源無法獲??；
找了很多方案，最后發(fā)現(xiàn)將視頻轉(zhuǎn)為ogv 就可以完美適配了；
mp4轉(zhuǎn)ogv文章來源：http://www.zghlxwxcb.cn/news/detail-621031.html
附threejs使用ogv進行環(huán)境貼圖的代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-621031.html
// 視頻紋理
const video = document.createElement("video");
video.src = "./images/test.ogv";
video.loop = true;
let palneTexture4 = new THREE.TextureLoader().load("./images/ruime7.jpg");
const planeGeometry4 = new THREE.PlaneGeometry(10, 12);
const planeMaterial4 = new THREE.MeshBasicMaterial({
// color: 0xffffff,
map: palneTexture4
});
const plane4 = new THREE.Mesh(planeGeometry4, planeMaterial4);
plane4.position.y = 2;
plane4.position.z = 16;
plane4.rotation.y = Math.PI + Math.PI / 2;
window.addEventListener("click", (e) => {
// 當鼠標移動的時候播放視頻
// 判斷視頻是否處于播放狀態(tài)
if (video.paused) {
video.play();
let texture = new THREE.VideoTexture(video);
planeMaterial4.map = texture;
planeMaterial4.map.needsUpdate = true;
} else {
video.pause()
}
});
到了這里，關(guān)于gitee page發(fā)布的靜態(tài)網(wǎng)站，無法播放目錄中的mp4視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
