gitee page发布的静态网站,无法播放目录中的mp4视频

起因是希望在gitee上部署静态网站,利用three.js VideoTexture 环境贴图播放视频。
但是试了多几次 mp4均提示404,资源无法获取;

找了很多方案,最后发现将视频转为ogv 就可以完美适配了;

mp4转ogv

附threejs使用ogv进行环境贴图的代码:

// 视频纹理
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()}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/9541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用百度地图SDK计算距离

说明:通过百度地图提供的SDK,可以计算出两个地点之间的距离,另外还有行驶路线等等。本文介绍如果使用百度地图SDK,并用java代码实现。 申请 首先需要登录百度地图的官网,申请开发者认证,个人认证一般都很…

GPT一键化身「AI助理」——自定义指令功能

最近GPT又更新了一个超实用的功能——自定义指令,启用后,你可以给GPT设置一些固定指令,让它记住或扮演某个角色,比如客服、律师、投资管理师、老师、营养师...... 这样,我们就不再需要每次都要打开新的聊天&#xff0c…

ChatGPT的工作原理:从输入到输出

🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~&#x1f33…

华为eNSP:isis配置跨区域路由

一、拓扑图 二、路由器的配置 1、配置接口IP AR1: <Huawei>system-view [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 1.1.1.1 24 [Huawei-GigabitEthernet0/0/0]q AR2: [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 1.1.1.2 24 [Huawe…

【React Native】学习记录(一)——环境搭建

Expo是一套工具&#xff0c;库和服务&#xff0c;可让您通过编写JavaScript来构建原生iOS和Android应用程序。 一开始学习的时候直接使用的是expo。 npx create-expo-app my-appcd my-appnpm run start接下来需要搭建安卓和IOS端&#xff08;为此特意换成了苹果电脑&#xff09…

云曦暑期学习第二周——文件上传漏洞

1.文件上传 1.1原理 一些web应用程序中允许上传图片、视频、头像和许多其他类型的文件到服务器中。 文件上传漏洞就是利用服务端代码对文件上传路径变量过滤不严格将可执行的文件上传到一个到服务器中 &#xff0c;再通过URL去访问以执行恶意代码。 1.2为什么存在文件上传漏…

Angular:动态依赖注入和静态依赖注入

问题描述&#xff1a; 自己写的服务依赖注入到组件时候是直接在构造器内初始化的。 直到看见代码中某大哥写的 private injector: Injector 动态依赖注入和静态依赖注入 在 Angular 中&#xff0c;使用构造函数注入的方式将服务注入到组件中是一种静态依赖注入的方式。这种方…

PHP关于数组的各类处理方法

获取数组中的唯一值 function getUniqueValues($array) {return array_unique($array); }// 示例用法 $numbers [1, 2, 3, 2, 1, 4, 5]; $result getUniqueValues($numbers); print_r($result); // 输出结果: Array ( [0] > 1 [1] > 2 [2] > 3 [5] > 4 [6] >…

React的hooks---useEffect

在函数组件主体内&#xff08;React 渲染阶段&#xff09;改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的&#xff0c;因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性 useEffect Hook 的使用则是用于完成此类副作用操作。useEffec…

ThinkPHP8知识详解:给PHP8和MySQL8添加到环境变量

在PHPenv安装的时候&#xff0c;环境变量默认的PHP版本是7.4的&#xff0c;MySQL的版本是5.7的&#xff0c;要想使用ThinkPHP8来开发&#xff0c;就必须修改环境变量&#xff0c;本文就详细讲解了如果修改PHP和MySQL的环境变量。 1、添加网站 启动phpenv&#xff0c;网站&…

102、SOA、分布式、微服务之间有什么关系和区别?

SOA、分布式、微服务之间有什么关系和区别? 分布式架构是指将单体架构中的各个部分拆分&#xff0c;然后部署到不同的机器或进程中去&#xff0c;SOA和微服务基本上都是分布式架构师SOA是一种面向服务的架构&#xff0c;系统的所有服务都注册在总线上&#xff0c;当调用服务时…

LiveGBS流媒体平台GB/T28181功能-设备树自定义分组自定义组织机构选择通道共享给上级国标平台配置权限给指定用户

LiveGBS流媒体平设备树自定义分组自定义组织机构选择通道共享给上级国标平台权限给指定用户 1、背景2、分组2.1、新建分组2.2、选择通道2.3、导入设备2.4、编辑名称2.5、删除分组2.6、移除分组 3、国标级联3.1、分组共享节点3.1.1、共享给上级平台3.1.2、分配权限给用户 3.2、级…

Android 帧率分析

卡顿&#xff1a; 界面呈现是指从应用生成帧并将其显示在屏幕上的动作。如需确保用户能够流畅地与您的应用互动&#xff0c;您的应用呈现每帧的时间不应超过 16ms&#xff0c;以达到每秒 60 帧的呈现速度&#xff08;为什么是 60fps&#xff1f;&#xff09;。如果您的应用存在…

PV操作解决经典进程同步问题

一.经典同步问题 在学习《操作系统》时&#xff0c;会接触到进程的概念&#xff0c;其中不可避免的接触到进程同步问题&#xff0c;今天我们用熟悉的PV操作解决一些经典的进程同步问题。 二.生产者-消费者问题 1.问题描述 问题描述&#xff1a;一组生产者进程和一组消费者进…

Linux中使用du命令来查看目录的大小

在Linux中&#xff0c;你可以使用du命令来查看目录的大小。下面是一些常用的du命令选项&#xff1a; -h&#xff1a;以人类可读的格式显示文件大小。-s&#xff1a;仅显示总大小&#xff0c;而不显示每个子目录的大小。-c&#xff1a;显示总大小&#xff0c;并在最后一行显示总…

汽车交流充电桩控制主板的电路设计

汽车充电桩控制主板的电路设计 你是否曾经遇到过汽车没油的问题?但是&#xff0c;随着电动汽车的普及&#xff0c;充电问题也变得越来越重要。而汽车充电桩控制板电路设计则是解决这一问题的关键。 汽车充电桩控制板电路设计包括硬件电路设计、软件电路设计和安全性设计。硬件…

[vulnhub]DC2

文章目录 [vulnhub]DC2信息收集flag1flag2cewlwpscan flag3什么是rbash&#xff1f; flag4flag5git提权 总结 [vulnhub]DC2 信息收集 扫ip&#xff0c;有两种方式&#xff1a;arp、nmap nmap -sP 192.168.56.0/24 -T4arp-scan -l192.168.56.137 扫端口&#xff1a; nmap -…

TEE GP(Global Platform)认证方案

TEE之GP(Global Platform)认证汇总 一、GP认证方案 二、GP认证方案分类 参考&#xff1a; GlobalPlatform Certification - GlobalPlatform

微服务系列(1)-who i am?

微服务系列&#xff08;1&#xff09;-我是谁 应用架构的演化 简单来说系统架构可以分为以下几个阶段&#xff1a;复杂的臃肿的单体架构-SOA架构-微服务 单体架构及其所面临的问题 在互联网发展初期&#xff0c;用户数量少&#xff0c;流量小&#xff0c;硬件成本高。因此…

关于axios请求java接口中的@RequestParam、@PathVariable及@RequestBody不同接参类型的用法

一、前端传json对象&#xff0c;后端指定接收json对象中的哪个参数。 (1)前端请求 axios({//请求方式method:post,//后端接口路径url:http://127.0.0.1:8080/api/deleteUserById,//注意这里使用的是params,该属性负责把属性名和属性值添加到url后面&#xff0c;一般和get配合使…