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 小时前
[V2X]音频数据流图
音视频
午安~婉16 小时前
Git中SSH连接
前端·git·gitee
byte轻骑兵18 小时前
【AVDTP】规范精讲[6]: 打通全流程,蓝牙音频连接背后的12步信令博弈
人工智能·音视频·avrcp·蓝牙耳机·蓝牙车机
qq36219670519 小时前
# 视频转文字准确率如何提升?影响识别质量的 6 个关键因素与优化技巧
音视频
不爱记笔记19 小时前
音视频转笔记工具横评2026,通义听悟、Ai好记、NotebookLM 实测对比
人工智能·笔记·ai·音视频·飞书·obsidian
中微极客19 小时前
Seedance 2.5深度解析:字节跳动30秒4K视频生成模型架构与API实战
音视频
SimpleLearingAI20 小时前
生成图像/视频质量评估
音视频·多模态大模型
hz5678920 小时前
音视频技术SDK选型指南:企业实时互动场景的关键能力解析
网络·云计算·音视频·实时音视频·信息与通信
paokuflying20 小时前
ffmpeg提取视频中的音频
ffmpeg·音视频
峥嵘life21 小时前
Android 系统应用蓝牙分享失败分析解决
android·gitee