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()
  }
});
相关推荐
悟纤15 小时前
Seedance 2.0 API 已上线 | 支持「人像视频生成」|支持100并发 | 满血版 [灵龙AI API]
人工智能·音视频·seedance 2.0
电化学仪器白超16 小时前
小乌龟Git全程图形化操作指南:嵌入式本地版本管理与Gitee私有云备份实战
git·python·单片机·嵌入式硬件·物联网·gitee·自动化
这儿有一堆花16 小时前
深入解析 Video.js:现代 Web 视频播放的工程实践
前端·javascript·音视频
人工智能研究所19 小时前
Claude + HyperFrames:用 HTML 方式制作视频,AI 时代一切皆可 HTML?
人工智能·html·音视频·ai 视频·hyperframes·claude-
zzh92020 小时前
基于51单片机的流水灯Proteus仿真按键切换 上到下下到上 2个灯(可定做)(免费代码+视频讲解)
51单片机·proteus·音视频
Shang1809893572621 小时前
T31ZX 君正/INGENIC智能视频处理器T31ZX可提供软硬件资料T31Z采用先进的低功耗设计
嵌入式硬件·fpga开发·音视频·t31zx智能视频处理器
音视频牛哥1 天前
纯血鸿蒙(HarmonyOS NEXT)下,如何实现低延迟RTSP、RTMP播放器音视频解码?
华为·音视频·harmonyos·鸿蒙rtmp播放器·鸿蒙rtsp播放器·harmonyos rtsp·鸿蒙next播放器
@hhr1 天前
使用java对接火山方舟doubao-seedance-1.5-pro 模型进行视频生成
java·python·音视频
轻口味1 天前
HarmonyOS 6 轻相机应用开发2:贴纸效果实现
音视频·harmonyos·鸿蒙·播放器
2601_949593651 天前
Flutter OpenHarmony 三方库 video_player 视频播放器适配详解
flutter·音视频