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()
  }
});
相关推荐
EasyCVR1 小时前
国标GB28181视频监控平台EasyCVR行业解决方案深度解读——雪亮工程、智慧城市与智慧交通
人工智能·音视频·智慧城市
“码”力全开4 小时前
打破芯片与协议壁垒:基于 Docker + 边缘计算的 GB28181/RTSP 视频智能管理平台架构设计与源码交付方案
docker·音视频·边缘计算
AI服务老曹12 小时前
解密企业级视频中台:基于 GB28181/RTSP 统一接入与边缘计算的 AI 视频管理平台(附 Docker 部署与源码交付方案)
人工智能·音视频·边缘计算
shandianchengzi12 小时前
【记录】LosslessCut|Linux下配置开源无损剪辑软件 LosslessCut AppImage 命令行启动和设置图标
linux·运维·服务器·音视频·视频·剪辑
zhaoshuzhaoshu12 小时前
无线耳机的音频传输时延技术对比总结
音视频
ai产品老杨13 小时前
深度解析:基于 Docker 与异构计算的下一代 AI 视频管理平台架构(附 GB28181/RTSP 统一接入与源码交付方案)
人工智能·docker·音视频
hz5678914 小时前
2026主流RTC音视频SDK选型全解析:性能对比+避坑指南+国产化适配深度横评
云计算·音视频·实时音视频·信息与通信
AI前沿资讯14 小时前
哪个AI 3D创作工具更适合视频创作?——2026年V2Fun实战指南
人工智能·3d·音视频
EasyDSS14 小时前
企业融媒体平台/私有化视频会议解决方案EasyDSS重构企业视频高效运维体系
重构·音视频·媒体
Mr. zhihao14 小时前
Mac + Typora + Gitee:粘贴图片自动上传,告别本地管理
gitee·typora