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 小时前
展厅数字内容同质化严重,怎样打造专属叙事风格?
大数据·前端·javascript·人工智能·html·音视频·展厅改造
LCG元3 小时前
STM32F407 I2S驱动WM8978音频播放实战:PLLI2S时钟整定、DMA双缓冲防爆音与WAV采样率实测
stm32·嵌入式硬件·音视频
jbk33113 小时前
PixiuCut「视频批量分割」支持智能镜头分割、按时长、按数量分割,可定义最小时长避免无效片段等多可选参数可设置
人工智能·音视频·剪辑软件·剪映自动化软件
投票竞赛3 小时前
作品投票版权注意事项,线上评选上传图片视频须知
python·音视频
旧梦星轨6 小时前
Git Flow 工作流实践
git·gitee·gitlab·github
byte轻骑兵6 小时前
【AVDTP】规范精讲[13]: 吃透内容保护机制,打通蓝牙音视频版权加密全流程
人工智能·音视频·avrcp·蓝牙耳机·蓝牙音频
7177777 小时前
软件成分分析工具怎么选:Gitee 生态下的 SCA 能力与选型框架
gitee
世岩清上8 小时前
文旅历史展厅纪录片式视频,怎样弱化说教感提升自主观看欲?
人工智能·音视频·宣传片·展厅改造
言乐68 小时前
Python加速器2视频网页加速器
前端·javascript·css·python·音视频