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()
  }
});
相关推荐
hz5678910 小时前
电子远程评标系统哪家好?安全、合规、易用平台评测指南
安全·云计算·音视频·实时音视频·信息与通信
星空语13 小时前
音频001_Android+Linux车载/手机音频全链路分层架构图
android·linux·音视频
hz5678915 小时前
局域网视频会议解决方案,适配政企专网场景
音视频·实时音视频·信息与通信·安全架构
Cutecat_16 小时前
YouTube 多语种自动配音功能实测:AI 如何让一条视频“开口说”多种语言
人工智能·科技·音视频
潜创微科技17 小时前
国产 USB3.0 千兆网卡芯片 CH9153:Pin-to-Pin 替换 RTL8153,免改板、免驱、工业级
音视频
中微极客20 小时前
2026 AI视频生成器选型指南:Kling 3.0深度解析
人工智能·音视频
ai产品老杨1 天前
NVIDIA GPU部署AI视频分析项目实战记录
人工智能·音视频
REDcker2 天前
远程实时操控技术详解
音视频·实时音视频·数据采集·遥控·遥操作·数据闭环·远程操控
AI_Video_Editing2 天前
长视频转短视频应用怎么选:从成本公式、处理链路到场景适配的判断逻辑
音视频
气泡音人声分离2 天前
技术解析|音频可视化:从波形图到声谱图,把“听觉”变成“视觉”
音视频·音频剪辑·音频可视化