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()
  }
});
相关推荐
qq_310658517 小时前
mediasoup源码走读(十)——producer
服务器·c++·音视频
小咖自动剪辑8 小时前
自动批量混剪视频软件配置流程
实时互动·音视频·语音识别·实时音视频·视频编解码
vfvfb9 小时前
根据srt去掉无人声的地方 视频保留对白 视频去掉没有说话的段
音视频·根据srt去掉无人声的地方·视频保留对白·视频去掉对白间隙
玩转以太网13 小时前
W55MH32L 单芯片以太网方案:实现网络音频高品质低延迟传输
音视频·以太网·硬件tcp/ip
白狐_79813 小时前
Google (Flow) 完全使用指南:从入门到精通AI视频生成
人工智能·音视频
EasyCVR13 小时前
视频汇聚平台EasyCVR打造地下车库智慧监控安防新体系
音视频
EasyDSS14 小时前
视频推流平台EasyDSS无人机推流直播筑牢警务安防技术防线
音视频·无人机
新海诚学QT14 小时前
pycharm gitee使用
gitee
中年程序员一枚15 小时前
不想花钱买会员,自己动手用python制作视频
开发语言·python·音视频
veteranJayBrother15 小时前
适配小程序的下滑上滑播放视频组件
小程序·apache·音视频