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 小时前
【gitee高校】使用模力方舟的大模型;API Error问题
gitee
潜创微科技3 小时前
IT6625 HDMI2.0 转双端口 MIPI CSI/DSI 高清转换芯片方案
嵌入式硬件·音视频
珊瑚怪人3 小时前
分享一个Edge浏览器播放H265 RTSP流的问题,涉及到ZLMediaKit、WebRTC
音视频·视频·js·zlmediakit·视频流处理
qcx233 小时前
【AI Agent实战】 0 成本视频处理全流程:ffmpeg + whisper 实现去水印、双语字幕、品牌片尾 | 实战SOP
人工智能·ffmpeg·音视频
huxiao_06013 小时前
Windosw下VS 2022编译FFmpeg(支持x264、x265、fdk-acc)
ffmpeg·音视频
F_D_Z4 小时前
Causal Forcing:自回归扩散蒸馏与高质量实时交互视频生成
数据挖掘·回归·音视频
骨子里的偏爱4 小时前
.raw后缀的文件转为jpg(压缩视频流转图片)
音视频
码云数智-园园4 小时前
告别Flash:HTML5音视频播放器实战指南
前端·音视频·html5
热爱专研AI的学妹14 小时前
Seedance 2.0(即梦 2.0)深度解析:AI 视频正式迈入导演级精准可控时代
大数据·人工智能·阿里云·音视频
byte轻骑兵19 小时前
从收音机到蓝牙:LE Audio核心BASS服务解析与实战
人工智能·音视频·语音识别·le audio·低功耗音频