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()
  }
});
相关推荐
Zender Han9 小时前
Flutter 视频播放器——flick_video_player 介绍与使用
android·flutter·ios·音视频
max50060010 小时前
实时多模态电力交易决策系统:设计与实现
图像处理·人工智能·深度学习·算法·音视频
前端小超超12 小时前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
达讯数字17 小时前
浅谈“SVMSPro视频切片”技术应用场景
音视频·mp4·海康·大华·svmspro·视频切片
嘀咕博客19 小时前
拍我AI:PixVerse国内版,爱诗科技推出的AI视频生成平台
人工智能·科技·音视频·ai工具
嘀咕博客21 小时前
SafeEar:浙大和清华联合推出的AI音频伪造检测框架,错误率低至2.02%
人工智能·音视频·ai工具
嘀咕博客21 小时前
PixVerse -免费在线AI视频生成工具
人工智能·音视频·ai工具
悟乙己1 天前
Github | MoneyPrinterTurbo:自动化视频内容生成系统
自动化·github·音视频
wan5555cn1 天前
多张图片生成视频模型技术深度解析
人工智能·笔记·深度学习·算法·音视频
雁于飞1 天前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github