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()
  }
});
相关推荐
奈斯先生Vector8 分钟前
AI 视频不是会动的图片:用 Shot Contract、时间码与音画质检构建可交付流水线
人工智能·重构·架构·prompt·aigc·音视频
ai产品老杨19 分钟前
AI视频分析并发优化参数配置说明
人工智能·音视频
怪奇云呼军23 分钟前
G.711、Opus 和重采样会拖慢识别吗?闪电智能VoiceAgent 的音频入口怎么选
java·人工智能·python·算法·云计算·音视频
承渊政道1 小时前
KES专业技能包发布:覆盖数据库开发、迁移与运维全流程
运维·数据库·gitee·数据库开发·金仓数据库
DogDaoDao1 小时前
MSU 2026 视频编解码大赛放榜深度解读
音视频·视频编解码·hevc·av1·h266·msu·avs
qq_267612891 小时前
Gitee CodePecker行业场景化落地指南:金融、车联网与IoT双引擎选型与工程化路径
前端·gitee·自动化
caimouse2 小时前
ReactOS 图形系统分析(2):视频端口驱动 videoprt.sys
音视频
7177773 小时前
开源协同底座支撑具身智能:Gitee 企业版与 AGIROS 共建机器人操作系统基础设施
机器人·gitee·开源
AI视觉网奇3 小时前
动作识别 视频理解大模型
开发语言·python·音视频
DogDaoDao3 小时前
NNVC-17.1 深度解析:神经网络视频编码的最新进展与性能全景
神经网络·音视频·视频编解码·h266·vvc·vtm·nnvc