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()
  }
});
相关推荐
刀客Doc3 小时前
复盘Netflix的2025:广告业务、线下业态和视频播客
人工智能·音视频
玥轩_5215 小时前
Git命令速查手册
大数据·git·elasticsearch·gitee·github·命令速查
EasyGBS5 小时前
EasyGBS助力智慧医院打造全方位视频监控联网服务体系
网络·音视频
前端与小赵5 小时前
uni-app开发安卓app时控制屏幕常亮不息屏
android·gitee·uni-app
数字孪生家族5 小时前
视频孪生与空间智能:重构物理世界的时空认知范式
音视频·空间智能·数字孪生头部企业·视频孪生与空间智能融合
Tracy9739 小时前
XMAU7118_VC1:16通道PDM到I²S/TDM音频转换器产品介绍
嵌入式硬件·音视频·智能硬件·xmos模组固件
做萤石二次开发的哈哈9 小时前
萤石开放平台机器人音视频对接流程
机器人·音视频
Tracy97310 小时前
OT83211_VC1:4通道 ASRC OTG(44.1kHz~192kHz)音频采样率转换器产品介绍
嵌入式硬件·音视频·xmos 模组·xmos模组固件
电鱼智能的电小鱼15 小时前
基于电鱼 AI 工控机的智慧工地视频智能分析方案——边缘端AI检测,实现无人值守下的实时安全预警
网络·人工智能·嵌入式硬件·算法·安全·音视频
音视频牛哥17 小时前
从协议规范和使用场景探讨为什么SmartMediaKit没有支持DASH
人工智能·音视频·大牛直播sdk·dash·dash还是rtmp·dash还是rtsp·dash还是hls