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()
  }
});
相关推荐
EasyGBS3 小时前
国标GB28181视频平台EasyGBS解决多格式视频流无缝转换难题
ffmpeg·音视频
byte轻骑兵4 小时前
【LE Audio】CAP精讲[2]: 三大角色+服务映射,CAP配置核心流程全拆解
人工智能·音视频·le audio·低功耗音频·蓝牙通话
非凡ghost8 小时前
视频下载神器:直播回放、视频链接一键抓取,还能自动监听!
java·前端·javascript·音视频
做萤石二次开发的哈哈8 小时前
萤石×广联达 | 智能视觉融合数字建造,让工地更透明、更安全
人工智能·安全·音视频·智能硬件
小王C语言9 小时前
gitee:克隆、同步、三板斧
gitee
芝士就是力量啊 ೄ೨9 小时前
Git使用教程(如何使用VSCode+Git+Gitee对项目进行版本控制)
git·vscode·gitee
小短腿的代码世界21 小时前
QtAV音视频播放实战深度解析:从零构建高性能跨平台播放器
qt·音视频
憧憬成为原神糕手1 天前
FFmpeg 音视频开发笔记(一):H.264 解码为 YUV
笔记·ffmpeg·音视频
ai产品老杨1 天前
突破品牌壁垒:基于 GB28181 与 RTSP 的异构 AI 视频平台架构深度解析(支持 Docker 与源码交付)
人工智能·架构·音视频
AI服务老曹1 天前
【架构深析】打破安防“黑盒”:GB28181/RTSP 视频管理平台如何通过源码交付与 API 驱动节省 95% 开发成本
架构·音视频