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()
  }
});
相关推荐
EasyDSS2 小时前
视频推流平台EasyDSS无人机推流技术打造大型安保巡逻监控新模式
音视频·无人机
2501_907136823 小时前
开源视频批量处理工具FFmpeg Batch AV Converter
ffmpeg·音视频·软件需求
EasyCVR3 小时前
从“看不见”到“看得清”:视频融合平台EasyCVR远程监控技术在沙尘暴交通监控中的应用
音视频
七牛云行业应用5 小时前
解决 AI 视频角色闪烁与时长限制:基于即梦/可灵的多模型 Pipeline 实战
人工智能·音视频·ai视频
Tiger Shi7 小时前
使用LIBOBS: 采集桌面,保存图片
ffmpeg·音视频·obs
别动哪条鱼8 小时前
AVAudioFifo
数据结构·ffmpeg·音视频
八月的雨季 最後的冰吻10 小时前
FFmepg--27-两路音频混合
ffmpeg·音视频
CV实验室1 天前
CV论文速递:覆盖视频生成与理解、3D视觉与运动迁移、多模态与跨模态智能、专用场景视觉技术等方向 (11.17-11.21)
人工智能·计算机视觉·3d·论文·音视频·视频生成
FinelyYang1 天前
uniapp+unipush2.0+WebRTC实现h5一对一视频通话
uni-app·音视频·webrtc
4***R2401 天前
C++在音视频处理中的库
开发语言·c++·音视频