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()
  }
});
相关推荐
三块钱079418 分钟前
【原创】基于视觉大模型gemma-3-4b实现短视频自动识别内容并生成解说文案
开发语言·python·音视频
放飞自我的Coder7 小时前
【gitee 初学者矿建仓库】
gitee
Icoolkj14 小时前
阿里通义万相 Wan2.1-VACE:开启视频创作新境界
音视频
u1521096484914 小时前
NDS3211HV单路H.264/HEVC/HD视频编码器
音视频·实时音视频·视频编解码
不念霉运1 天前
Gitee DevOps:中国企业数字化转型的“本土化加速器“
运维·gitee·团队开发·代码规范·devops·代码复审
科技小E1 天前
EasyRTC嵌入式音视频通信SDK打造带屏IPC全场景实时通信解决方案
人工智能·音视频
難釋懷1 天前
Android开发-文本输入
android·gitee
天上路人1 天前
AI神经网络降噪算法在语音通话产品中的应用优势与前景分析
深度学习·神经网络·算法·硬件架构·音视频·实时音视频
视频砖家1 天前
如何设置FFmpeg实现对高分辨率视频进行转码
ffmpeg·音视频·视频编解码·视频转码
yanjiee1 天前
视频质量分析时,遇到不同分辨率的对照视频和源视频,分辨率对齐的正确顺序。
ffmpeg·音视频