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()
  }
});
相关推荐
音视频牛哥2 小时前
无人机安防体系的音视频超低延迟重构:从“空地融合”到“实时智控”
人工智能·音视频·无人机·大牛直播sdk·rtsp播放器·rtmp播放器·低空经济rtmp rtsp
小白狮ww4 小时前
清华联合字节推出 HuMo,实现三模态协同生成人物视频
人工智能·深度学习·机器学习·音视频·视频生成·多模态模型·人物视频
Q2706810204 小时前
如何才能提升视频的「听觉质感」
音视频
victory043112 小时前
在音频领域采用mamba模型可行性分析
音视频
Black蜡笔小新12 小时前
视频汇聚平台EasyCVR级联播放偶发失败排查:TCP主动模式下的3秒超时响应差
网络·tcp/ip·音视频
未来之窗软件服务12 小时前
未来之窗昭和仙君(二十八)商业收银开发音频播放——东方仙盟筑基期
microsoft·音视频·仙盟创梦ide·东方仙盟·昭和仙君
AlexMercer101213 小时前
Ubuntu从零开始配置Git
c++·git·ubuntu·gitee
Code blocks14 小时前
GB28181视频服务wvp搭建(二)
后端·音视频
猫林老师15 小时前
HarmonyOS多媒体开发:自定义相机与音频播放器实战
数码相机·音视频·harmonyos
EasyNVR1 天前
EasyNVR 录像自由时段启停与快照定时更新
音视频