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()
  }
});
相关推荐
EasyDSS11 分钟前
私有化视频会议系统/视频高清直播点播EasyDSS企业级融媒体平台重塑智慧医疗协作新生态
音视频·媒体
AI服务老曹43 分钟前
异构计算与边缘协同:基于 Spring Boot 的 AI 视频管理平台架构深度解析
人工智能·spring boot·音视频
琪伦的工具库1 小时前
批量音频添加背景音乐使用说明:固定BGM或随机BGM,批量输出到新目录
音视频
咕噜签名-铁蛋1 小时前
Seedance 2.0公测API全面开放:无需排队过白,AI视频创作进入极速时代
人工智能·音视频
KevinCyao10 小时前
java视频短信接口怎么调用?SpringBoot集成视频短信及回调处理Demo
java·spring boot·音视频
EasyDSS12 小时前
私有化视频会议系统/私有化音视频系统EasyDSS在社交娱乐领域实时互动场景中的应用
实时互动·音视频·娱乐
Ulyanov13 小时前
基于ttk的现代化Python音视频播放器:UI设计与可视化技术深度解析
python·ui·音视频
Black蜡笔小新14 小时前
GB28181视频汇聚平台EasyCVR构建智慧环保可视化监测解决方案,赋能生态可持续发展
音视频
肖爱Kun15 小时前
SRT协议封装MPEG-TS 流的视频和音频PES头结构
音视频
reasonsummer16 小时前
【教学类-160-02】20260409 AI视频培训-练习2“豆包AI视频《小班-抢玩具》+豆包图片风格:手办”
python·音视频·ai视频·豆包·通义万相