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()
  }
});
相关推荐
hz5678913 分钟前
手术室视频示教系统解决方案:让临床教学突破空间限制
安全·音视频·实时音视频·信息与通信·智能硬件
7177772 小时前
国内组件安全扫描工具选哪家:2026年主流方案对比与选型指南
人工智能·gitee
可乐鸡翅yeah_2 小时前
混合内容 Mixed‑Content 安全策略,HLS HTTPS 页面加载 HTTP 资源排错实战
运维·ffmpeg·音视频·媒体·m3u8
tryCbest2 小时前
git实现前后端分离项目提交同一个仓库
git·gitee
Mr.朱鹏3 小时前
Git 仓库同时推送到 Gitee 与 GitHub 配置指南
git·gitee·开源·github
7177773 小时前
GitHub 企业国产替代选型:Gitee 与主流平台对比及迁移要点
人工智能·gitee
揽秀亭长4 小时前
音轨分离处理方案及效果测试分析
人工智能·音视频
美狐美颜SDK开放平台4 小时前
直播APP如何兼顾画质与低延迟?视频美颜SDK性能优化开发思路
人工智能·深度学习·音视频·美颜sdk·第三方美颜sdk
山顶夕景6 小时前
【VLM】Qwen3.8-Omni-Flash长音视频理解Agentic模型
音视频·vlm·视频理解·agentic·全模态
tedcloud1236 小时前
emilkowalski/skills:让 AI 写出来的网页更有“设计感”
服务器·人工智能·开源·音视频·ai编程