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()
  }
});
相关推荐
给算法爸爸上香15 小时前
yolo目标检测线程池高性能视频tensorrt推理(每秒1000+帧)
yolo·目标检测·音视频·线程池·tensorrt
大学生小郑15 小时前
sensor成像的原理
图像处理·音视频·视频
C澒16 小时前
Gitee 分支管理规范
gitee·团队开发
AI浩19 小时前
学习语言驱动的序列级别模态不变表示用于视频可见光-红外行人重识别
学习·音视频
梁下轻语的秋缘20 小时前
从零到一:本地项目上传Gitee完整指南(新手避坑版)
gitee
TheNextByte120 小时前
如何在Android上恢复已删除的文件
android·gitee
老陈聊架构21 小时前
『AI视频创作』Remotion Skills 完全指南:用自然语言创作视频的革命
人工智能·音视频·skill·remotion
视频技术分享21 小时前
2026年实时音视频服务选型深度解析
音视频·实时音视频·视频
三十_A2 天前
前端技术分享:基于 Canvas 实现视频帧截取与下载方案
前端·音视频
地狱为王2 天前
Unity使用NovaSR将沉闷的16kHz音频升频成清晰的48kHz音频
unity·游戏引擎·音视频·novasr