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()
  }
});
相关推荐
上海合宙LuatOS5 小时前
LuatOS核心库API——【hmeta 】硬件元数据
单片机·嵌入式硬件·物联网·算法·音视频·硬件工程·哈希算法
一个人旅程~7 小时前
QQ音乐、potplayer、VLC等对音乐格式的支持和加密文件格式的转换有哪些方法?potplayer的音质相对于VLC有哪些特点?
windows·经验分享·电脑·音视频
音视频牛哥7 小时前
从协议栈到工程落地:SmartMediaKit全链路模块化架构深度解析
音视频·rtsp播放器·rtmp播放器·安卓rtsp服务器·安卓轻量级rtsp服务·安卓rtsp摄像头推流·安卓摄像头rtmp推流
奔跑吧 android9 小时前
【车载Audio】【AudioHal 04】【高通音频架构】【从 AHAL adev_open 到 PAL XML 解析:30微秒内的调用链深度追踪】
音视频·audiohal·车载audio·高通音频架构·ahal·audiofinger
REDcker10 小时前
FFmpeg完整文档
linux·服务器·c++·ffmpeg·音视频·c·后端开发
linux_cfan11 小时前
WordPress 视频播放痛点解决方案:支持 RTSP/WebRTC 与字幕检索的 ZWPlayer 插件实测
php·音视频·webrtc
AI周红伟1 天前
周红伟:字节官方发布Seedance 2.0 视频模型,技术实现过程和 技术分解
音视频
查无此人byebye1 天前
实战DDPM扩散模型:MNIST手写数字生成+FID分数计算(完整可运行版)
人工智能·pytorch·python·深度学习·音视频
唐璜Taro1 天前
硬核实战:内网 Windows 环境下 Jenkins + Gitee 自动化部署 Vue2 项目
gitee·自动化·jenkins
九丝城主1 天前
1V1音视频对话2--Web 双浏览器完整通话测试(强制 relay)
前端·音视频