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()
  }
});
相关推荐
愚公搬代码8 小时前
【愚公系列】《AI短视频创作一本通》004-AI短视频的准备工作(创作AI短视频的基本流程)
人工智能·音视频
木斯佳11 小时前
HarmonyOS 6实战(源码解析篇):音乐播放器的音频焦点管理(上)——AudioSession与打断机制
华为·音视频·harmonyos
卢锡荣13 小时前
Type-c OTG数据与充电如何进行交互使用应用讲解
c语言·开发语言·计算机外设·电脑·音视频
沛沛老爹17 小时前
Web开发者转型AI:多模态Agent视频分析技能开发实战
前端·人工智能·音视频
等风来不如迎风去18 小时前
【UniVA】1:统一的视频agent:智能体系统,专门用于处理复杂的视频生成、编辑和理解任务
音视频
知秋一叶12319 小时前
Miloco v0.1.6 :米家摄像头清晰度配置 + RTSP 音频传输
人工智能·音视频·智能家居
xmRao21 小时前
Qt+FFmpeg 实现音频重采样
qt·ffmpeg·音视频
发哥来了21 小时前
主流AI视频生成模型商用化能力评测:三大核心维度对比分析
大数据·人工智能·音视频
发哥来了21 小时前
《AI图生视频技术深度剖析:原理、应用与发展趋势》
人工智能·音视频
EasyCVR1 天前
国标GB28181视频监控平台EasyCVR智慧农场监管可视化方案设计
音视频