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()
  }
});
相关推荐
ujainu小10 小时前
Flutter 视频播放全攻略:video_player 2.10.1 插件全平台集成与实战
flutter·音视频
AI大模型学徒10 小时前
腾讯云视频通话Demo跑通教程
音视频·腾讯云
urkay-11 小时前
Android 全局悬浮窗
android·gitee
好好研究12 小时前
Git - tag标签和Git图像化界面
git·gitee
却道天凉_好个秋13 小时前
音视频学习(七十五):视频压缩:量化
音视频·视频压缩
却道天凉_好个秋13 小时前
音视频学习(七十六):熵编码
音视频·视频压缩
程序猿追14 小时前
在昇腾NPU上实战部署LongCat-Video:从环境配置到长视频生成的完整指南
python·大模型·华为云·音视频
Yutengii14 小时前
小红书的视频怎么下载到本地,实测6款下载工具
音视频
非凡ghost15 小时前
Topaz Video(人工智能视频增强软件)
人工智能·windows·学习·音视频·软件需求
zbguolei15 小时前
Windows平台下SRS实时视频服务器的搭建
服务器·windows·音视频