起因是希望在gitee上部署静态网站,利用three.js VideoTexture 环境贴图播放视频。
但是试了多几次 mp4均提示404,资源无法获取;
找了很多方案,最后发现将视频转为ogv 就可以完美适配了;
mp4转ogv文章来源:https://www.toymoban.com/news/detail-621031.html
附threejs使用ogv进行环境贴图的代码:文章来源地址https://www.toymoban.com/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) => {
// 当鼠标移动的时候播放视频
// 判断视频是否处于播放状态
if (video.paused) {
video.play();
let texture = new THREE.VideoTexture(video);
planeMaterial4.map = texture;
planeMaterial4.map.needsUpdate = true;
} else {
video.pause()
}
});
到了这里,关于gitee page发布的静态网站,无法播放目录中的mp4视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!