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()
  }
});
相关推荐
yong99907 小时前
基于MATLAB的帧间差分法视频目标检测实现
目标检测·matlab·音视频
许泽宇的技术分享11 小时前
SkyReels V1 人像视频生成模型的技术拆解与实战指南
音视频·漫剧·ai漫剧
EasyDSS11 小时前
视频推流平台EasyDSS无人机推流直播技术在水利巡检场景的应用与实践
音视频·无人机
EasyGBS14 小时前
EasyGBS:一体化视频监控与智能管理解决方案
音视频
壮哥_icon14 小时前
Android 使用 PackageInstaller 实现静默安装,并通过 BroadcastReceiver 自动重启应用
android·gitee·android-studio·android系统
5008414 小时前
鸿蒙 Flutter 隐私合规:用户授权中心与数据审计日志
flutter·华为·开源·wpf·音视频
云山工作室16 小时前
基于STM32的视力保护台灯设计与实现(论文+源码)
stm32·单片机·嵌入式硬件·毕业设计·音视频
EasyCVR16 小时前
安防监控进入“云边端”协同时代,EasyCVR视频中台将扮演什么角色?
音视频
小白狮ww16 小时前
挥手点亮圣诞:AI 3D 魔法树教程
人工智能·深度学习·机器学习·3d·音视频·图片处理·动作识别
不光头强16 小时前
Gitee 与 GitHub:HTTPS/SSH 协议操作
运维·gitee·ssh