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()
  }
});
相关推荐
jbk33116 小时前
开发了一个免费的批量视频语音字幕识别工具,核心点是可批量自动处理识别任务
音视频
Coovally AI模型快速验证10 小时前
超越Sora的开源思路:如何用预训练组件高效训练你的视频扩散模型?(附训练代码)
人工智能·算法·yolo·计算机视觉·音视频·无人机
weixin_4368040710 小时前
音频在线预览工具 - 输入URL即刻播放远程音频
音视频
kaizq11 小时前
AI-MCP本地流媒音频服务器设计与CherryStudio部署应用
音视频·cherrystudio·fastmcp·streamablehttp·本地mcp流媒服务器
thinkMoreAndDoMore11 小时前
audioservice
音视频
TEL1892462247712 小时前
IT6517BFN:单芯片DisplayPort转VGA转换器,集成MCU
音视频·实时音视频·视频编解码
别或许12 小时前
Gitee新手使用全解
gitee
TEL1892462247713 小时前
IT6516BFN:单芯片DisplayPort转VGA转换器,集成MCU
音视频·实时音视频·视频编解码
Facechat13 小时前
视频混剪-WebCodecs导出视频
音视频
Facechat14 小时前
视频混剪-转场效果是怎么实现的
音视频