gitee page发布的静态网站,无法播放目录中的mp4视频

起因是希望在gitee上部署静态网站,利用three.js VideoTexture 环境贴图播放视频。

但是试了多几次 mp4均提示404,资源无法获取;

找了很多方案,最后发现将视频转为ogv 就可以完美适配了;

mp4转ogv

附threejs使用ogv进行环境贴图的代码:

js 复制代码
// 视频纹理
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()
  }
});
相关推荐
组合缺一3 小时前
Solon AI 开发学习8 - chat - Vision(理解)图片、声音、视频
java·人工智能·学习·ai·音视频·solon
Yeats_Liao4 小时前
CANN Samples(七):视频与流媒体:RTSP与多路输入实战
人工智能·机器学习·音视频
山海青风5 小时前
用 Meta MMS-TTS + Python在本地把藏文文本变成藏语语音
python·音视频
你好音视频6 小时前
RTSP推流流程深度解析:从协议原理到FFmpeg实现
ffmpeg·音视频
全栈视界师8 小时前
《机器人实践开发③:Foxglove可视化机器人的眼睛-视频》
opencv·机器人·音视频
双木的木8 小时前
Coggle数据科学 | 并行智能体:洞察复杂系统的 14 种并发设计模式
运维·人工智能·python·设计模式·chatgpt·自动化·音视频
有位神秘人9 小时前
Android视频播放方案
android·音视频
AI周红伟10 小时前
开源 | InfiniteTalk:无限长虚拟人视频生成的新范式
音视频
pu_taoc10 小时前
音频重采样注意事项--软件层面
音视频
加油201910 小时前
音视频处理(五):DLNA投屏技术详解
音视频·dlna·upnp·ssdp·投屏技术·mcast