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()
  }
});
相关推荐
ProgramHan3 小时前
github、gitlab、gitee分别都是什么,为什么不能访问?
gitee·gitlab·github
不吃鱼的猫7489 小时前
【ffplay 源码解析系列】02-核心数据结构详解
c++·ffmpeg·音视频
PieroPc10 小时前
用python 写的 Gitee 数据备份工具
开发语言·python·gitee
lili-felicity10 小时前
进阶实战 Flutter for OpenHarmony:视频全屏播放系统 - 结合屏幕旋转
flutter·音视频
奔跑吧 android10 小时前
【车载Audio】【AudioHal 06】【高通音频架构】【深入浅出 Android Audio HAL:从加载到函数指针绑定的全链路解析】
android·音视频·audioflinger·aosp13·8295·audiohal·高通音频架构
l1t11 小时前
利用DeepSeek和qwen 3.5辅助生成SQL优化方法幻灯片视频
数据库·sql·音视频
yq19820430115611 小时前
基于Python爬虫原理的Pinterest视频资源获取技术解析与工具实践
爬虫·python·django·音视频
不吃鱼的猫74812 小时前
【ffplay 源码解析系列】01-开篇-ffplay整体架构与启动流程
c++·架构·ffmpeg·音视频
哈__1 天前
基础入门 Flutter for OpenHarmony:video_thumbnail 视频缩略图详解
flutter·音视频
secondyoung1 天前
Git使用:Git使用问题及解决方法总结
windows·经验分享·git·vscode·gitee·github·gitcode