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()
  }
});
相关推荐
be or not to be7 小时前
HTML入门系列:从图片到表单,再到音视频的完整实践
前端·html·音视频
LCG米8 小时前
基于ESP32-S3与OV5640的高清低延迟无线视频传输系统构建教程
音视频
Angelina_Jolie9 小时前
基于 Retinex 的 TempRetinex:适用于不同光照条件下低光视频的无监督增强方法
计算机视觉·音视频
山海青风12 小时前
藏文TTS介绍:6 MMS 项目的多语言 TTS
人工智能·python·神经网络·音视频
Everbrilliant8916 小时前
FFmpeg解码OpenSL、ANativeWindow播放实现音视频同步
ffmpeg·音视频·opensl音视频同步播放·音视频同步播放·唇音同步·音视频时钟漂移·播放时钟同步
一点晖光17 小时前
ffmpeg实现图片转视频效果
ffmpeg·音视频
咕噜船长17 小时前
使用Qwen3-VL模型批量标注视频内容(视频理解)
人工智能·pytorch·深度学习·音视频·视频
音视频牛哥18 小时前
内网RTSP直连 + 公网RTMP上云:基于SmartMediakit的 Android双引擎架构设计
音视频·安卓rtsp服务器·安卓轻量级rtsp服务·安卓rtsp摄像头推流·安卓摄像头rtmp推流·安卓 camera2 rtsp·安卓camera2 rtmp
二等饼干~za89866818 小时前
碰一碰发视频系统源码开发搭建--技术分享
java·运维·服务器·重构·django·php·音视频
Java后端的Ai之路19 小时前
【远程仓库】- 上传本地项目到远程仓库Gitee(码云)指南
git·gitee·ssh·仓库