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()
  }
});
相关推荐
潜创微科技4 小时前
IT6616:HDMI1.4 转 MIPI CSI/DSI 4K 单芯片视频转换方案
音视频
hhdyzwhy5 小时前
彩色血流成像(三):滤波
音视频
EasyDSS7 小时前
视频高清直播点播/智能会议管理系统EasyDSS优化升级提升视频会议协作体验
音视频
DogDaoDao8 小时前
AV1 环路滤波器深度解析:av1_loopfilter.c 源码原理详解
音视频·实时音视频·视频编解码·av1·vp9·libaom·环路滤波
ZC跨境爬虫9 小时前
跟着MDN学HTML_day_47:(Document接口)
前端·javascript·ui·html·ecmascript·音视频
YuxuanSys-Regen9 小时前
WMMAV&YUXUANSYS/育轩:Dante主机接入手持发射器:让会议音频进入“无线高保真”时代
音视频·腾讯会议·teams·dante·无线手持·音频设备
kcuwu.9 小时前
博客转抖音视频(文件上传版)Coze工作流实现文档(第一版)
人工智能·音视频·coze
沙振宇9 小时前
【Python】使用YOLO8识别视频中的车与人物
python·yolo·音视频·状态模式·识别
开开心心就好10 小时前
支持添加网址的资源快速打开工具
人工智能·学习·游戏·音视频·hbase·语音识别·storm
AI搅拌机1 天前
LTX2.3 IC-LORA动作迁移,通过depth、POSE、Canny精准控制生成的视频!
人工智能·音视频