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()
  }
});
相关推荐
QH139292318802 小时前
R&S FSPN50 FSPN26 FSWP26 相位噪声分析仪典型应用案例
人工智能·百度·微信·集成测试·音视频·facebook·oneapi
HyperAI超神经3 小时前
MiniMax H3 突破视频生成边界,音画内容一体生成;Ornith-1.5-35B-A3B 探索推理模型自进化训练新模式
人工智能·深度学习·学习·音视频·多模态·视频生成·推理模型
chunmiao30323 小时前
Gemini Omni 1.1 Flash 发布:场景扩展上限 40 秒,AI 视频生成转向可控
人工智能·音视频
音视频牛哥3 小时前
世界人形机器人运动会9项新赛技术解读:全自主、灵巧手与机器人实时音视频系统演进
音视频·世界人形机器人运动会·世界人形机器人运动会9项新赛·人形机器人技术发展·机器人实时音视频·机器人低延迟视频·机器人远程接管
zhonyu鱼3 小时前
Shotcut:免费开源的专业级视频剪辑软件
音视频·开源软件
7177773 小时前
Gitee 用 AI Agent 重塑 DevSecOps 全流程:从 “被调用的工具“ 到 “主动干活的队友“
人工智能·gitee·jquery
念越3 小时前
【保姆级教程】本地项目如何上传到 Gitee(码云)仓库
gitee
码云骑士3 小时前
120-视频理解-大模型视频分析-抽帧-自动字幕摘要-高光片段
python·音视频
镭封4 小时前
2026免费AI配音5款实测:哪些真正无水印可导出音频
人工智能·音视频·媒体
H0311169854 小时前
会议视频转文字工具实测:六款主流方案功能与适用场景解析
音视频