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()
  }
});
相关推荐
刘广睿19 分钟前
多素材对比同步播放怎么设计?对齐播放与差异高亮的功能复盘
音视频·效率工具·架构设计·桌面客户端·素材管理
2601_9621007344 分钟前
AI批量生成视频的工程化复盘(2026):一条能断点续跑、不重复扣量的出片脚本
人工智能·音视频
小柯南敲键盘1 小时前
跨境电商批量图片翻译与视频字幕翻译,就用跨马AI工具
大数据·人工智能·python·音视频
可乐鸡翅yeah_2 小时前
FFmpeg 与浏览器 HLS 播放表现差异,定位跨客户端兼容问题
ffmpeg·音视频·m3u8·m3u8在线·音视频在线播放
神探小白牙2 小时前
海康视频在vue2.0中的使用
前端·音视频
AI天行健2 小时前
文生视频与图生视频的技术区别及适用场景分析
人工智能·音视频
阿童木写作2 小时前
跨境电商批量图片翻译与视频字幕翻译工具推荐
python·音视频
orient.lu2 小时前
第 21 章《图像生成与音频转录》· nanobot 多模态 Provider 源码解析:11 图像 + 6 转录注册表
音视频·nanobot
Mr数据杨3 小时前
【Codex】接入音频转录服务实现课堂语音结构化处理
django·音视频·codex·项目开发
ALINX技术博客4 小时前
【黑金云课堂】FPGA技术教程FPGA 基础:HDMI视频输入与环路输出实验
fpga开发·音视频