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()
  }
});
相关推荐
嘉恩督1 小时前
视频人脸处理——人脸面部动作提取
python·音视频
小雪人8286 小时前
如何批量旋转视频90度?
音视频
apihz7 小时前
通用图片搜索-搜狗源免费API接口使用指南
android·java·python·php·音视频
素雪风华8 小时前
Jenkins+Gitee+Docker容器化部署
java·docker·gitee·jenkins·springboot·持续部署
aqi008 小时前
FFmpeg开发笔记(七十四)Windows给FFmpeg集成二维码图像的编解码器
ffmpeg·音视频·直播·流媒体
Antonio9158 小时前
【音视频】HLS拉流抓包分析
音视频
9527华安1 天前
FPGA实现SDI转LVDS视频发送,基于GTP+OSERDES2原语架构,提供工程源码和技术支持
fpga开发·音视频·lvds·gtp·sdi·oserdes2
王者鳜錸1 天前
基于Selenium和FFmpeg的全平台短视频自动化发布系统
selenium·ffmpeg·音视频
aqi001 天前
FFmpeg开发笔记(七十三)Windows给FFmpeg集成MPEG-5视频编解码器
ffmpeg·音视频·直播·流媒体
EasyCVR1 天前
EasyCVR视频汇聚平台国标接入设备TCP主动播放失败排查指南
网络·tcp/ip·音视频