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()
  }
});
相关推荐
REDcker15 小时前
Oryx开发者快速入门
服务器·后端·音视频·实时音视频·srs·流媒体·oryx
REDcker16 小时前
Oryx完整文档
服务器·后端·音视频·实时音视频·srs·流媒体·oryx
美狐美颜SDK开放平台17 小时前
美颜sdk哈哈镜功能开发指南:从人脸识别到动态变形
人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk
小鹿软件办公18 小时前
音频比特率设置多少最好?320kbps 真的比 128kbps 好很多吗
音视频·音频比特率如何设置
大模型实验室Lab4AI18 小时前
山大提出攻克视频大模型时间理解短板新方案
人工智能·深度学习·算法·机器学习·音视频
lusasky19 小时前
公安交通领域多模态视频分析+Video-Chat/Video-RAG产品案例与技术原理
音视频
查无此人byebye19 小时前
从DDPM到DiT:扩散模型3大核心架构演进|CNN到Transformer的AIGC生成革命(附实操要点)
人工智能·pytorch·深度学习·架构·cnn·音视频·transformer
SJjiemo20 小时前
闪豆多平台视频批量下载器
音视频
小鹿软件办公1 天前
一行命令搞定!用 FFmpeg 按指定码率压缩视频
ffmpeg·音视频
Zeku1 天前
RTSP音视频传输软件流程文档
stm32·音视频·freertos·linux驱动开发·linux应用开发