当前位置: 首页 > news >正文

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()}
});

相关文章:

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

起因是希望在gitee上部署静态网站,利用three.js VideoTexture 环境贴图播放视频。 但是试了多几次 mp4均提示404,资源无法获取; 找了很多方案,最后发现将视频转为ogv 就可以完美适配了; mp4转ogv 附threejs使用ogv进…...

opencv-26 图像几何变换04- 重映射-函数 cv2.remap()

什么是重映射? 重映射(Remapping)是图像处理中的一种操作,用于将图像中的像素从一个位置映射到另一个位置。重映射可以实现图像的平移、旋转、缩放和透视变换等效果。它是一种基于像素级的图像变换技术,可以通过定义映…...

SkyWalking链路追踪中span全解

基本概念 在SkyWalking链路追踪中,Span(跨度)是Trace(追踪)的组成部分之一。Span代表一次调用或操作的单个组件,可以是一个方法调用、一个HTTP请求或者其他类型的操作。 每个Span都包含了一些关键的信息&am…...

【前端知识】React 基础巩固(三十一)——Redux的简介

React 基础巩固(三十一)——Redux 一、Redux是个纯函数 概念 纯函数(确定的输入一定产生确定的输出,函数在执行过程中不产生副作用): 在程序设计中,若一个函数符合以下条件,那么这个函数就被称为纯函数…...

拦截Bean使用之前各个时机的Spring组件

拦截Bean使用之前各个时机的Spring组件 之前使用过的BeanPostProcessor就是在Bean实例化之后,注入属性值之前的时机。 Spring Bean的生命周期本次演示的是在Bean实例化之前的时机,使用BeanFactoryPostProcessor进行验证,以及在加载Bean之前进…...

RT thread 之 Nand flash 读写过程分析

文章目录 前言:什么是Nand Flash?1、Nand Flash 读取步骤2、从主存读到Cache2.1 在标准spi接口下读取过程2.2 测试时序(SPI频率30MHz) 3.从Cache读取数据3.1在标准spi接口读取过程测试时序 前言:什么是Nand Flash&…...

独立站最全出单营销指南,新手卖家赶紧学起来吧!

这是一个需要投入大量时间和精力的挑战,但只有经过筛选在众多品牌和渠道中找到最适合自己的营销策略,才能成功。 新手商家经常会发现自己有很多可以改进的地方:品牌的颜色、字体以及其他一些细节。但真正走向成熟的商家会意识到,…...

Git移除commit过的大文件

前言:在提交推送本地更改至仓库时,误将大文件给提交了,导致push时报错文件过大,因此需要将已经commit的大文件移除后再push 若已知要删除的文件或文件夹路径,则可以从第4步开始 1.对仓库进行gc操作 $ git gc 2.查询…...

再见 Spring Boot 1.X ,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维护到2019年8月1日。 1.5.x 将会…...

Jsonp劫持

JSONP 介绍 jsonp是一种协议,准确的说,他是json的一种使用模式,为了解决Json受同源策略限制的问题。 基本语法 JSONP的基本语法为:callback({“name”:”test”, “msg”:”success”}) 常见的例子包括函数调用(如…...

STM32CubeIDE(串口)

目录 一、轮询模式 1.1 配置USART2为异步模式 1.2 500ms发送一次消息 1.3 通信结果 1.4 串口控制LED 二、中断收发 2.1 开启中断 2.2 中断发送接收 2.2.1 中断发送只需要调用接口 2.2.2 中断接收 2.3 实验结果 三、DMA模式与收发不定长数据 3.1 DMA通道配置 3.2 DMA…...

Python编程很简单,四步菜鸟到高手(文末送书5本)

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…...

Labview串口通信MSComm实现串口收发

文章目录 前言一、什么是 MSComm二、MSComm 控件下载三、MSComm 控件的注册四、使用 MSComm 控件1、前面板放置控件2、MSComm 的常用属性3、MSComm 控件的事件 五、实现串口收发1、搭建虚拟串口2、发送测试3、接收测试4、后面板核心程序框图 六、程序自取 前言 本文介绍使用 A…...

字节跳动 EB 级 Iceberg 数据湖的机器学习应用与优化

深度学习的模型规模越来越庞大,其训练数据量级也成倍增长,这对海量训练数据的存储方案也提出了更高的要求:怎样更高性能地读取训练样本、不使数据读取成为模型训练的瓶颈,怎样更高效地支持特征工程、更便捷地增删和回填特征。本文…...

CentOS 安装Mysql8

1.检查是否已经安装mysql,停止mysql服务,删除mysql ps -ef | grep -i mysql systemctl stop mysqld rpm -e mysql 2.配置仓库 更新秘钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 安装mysql8的yum源 rpm -Uvh https://dev.mysql.…...

3-Linux实操

Linux实践操作 开关机、重启、用户登陆注销关机&重启用户登陆和注销 用户管理添加用户修改用户密码删除用户查询用户信息切换用户查看当前用户用户组的添加和删除用户和组相关文件 实用指令指定运行级别init 命令帮助指令文件目录类时间日期类搜索查找类🔍压缩和…...

Yarn 集群的架构和工作原理

Yarn 的基本设计思想是将 MapReduce V1 中的 JobTracker 拆分为两个独立的服务:ResourceManager 和 ApplicationMaster。 ResourceManager 负责整个系统的资源管理和分配,ApplicationMaster 负责单个应用程序的管理。 ResourceManager RM 是一个全局的资…...

PostgreSQL-视图-03-查询对象依赖关系视图-dba_dependencies

PostgreSQL查询对象依赖关系视图 -- PostgreSQL查询对象依赖关系视图drop view if exists tzq.dba_dependencies; create view tzq.dba_dependencies as with source_obj as (select sp.oid,sp.proname,unnest(string_to_array(regexp_replace(regexp_replace(lower(sp.prosrc…...

Vue style中的 scoped 属性

Vue 中存在 scoped 属性,HTML5中也存在一个 scoped 属性,而且,这两者都是针对 css 样式处理的属性,所以很多文章在 解释 Vue scoped 的时候,都会把两者混为一谈,直接进把 HTML5 scoped 的定义搬到 Vue scop…...

移动端适配rem

1.安装amfe-flexible和postcss-pxtorem, npm install amfe-flexible --save npm install postcss-pxtorem5.1.1 (这里我使用的postcss-pxtorem是5.1.1版本)或者在pageage.json中写入 "amfe-flexible": "^2.2.1","postcss-pxtorem": …...

机器学习与深度学习在地球物理勘探中的应用:基于电阻率数据预测极化率模型

1. 项目概述与核心价值在花岗岩这类地质条件复杂的地区搞勘探,最头疼的就是地下情况“看不清”。传统的电阻率(ERT)和激发极化(IP)联合反演,就像用一把刻度模糊的尺子去量一块表面坑洼不平的石头——面对高…...

基于Arduino的模块化DIY智能时钟:从RTC到RGB LED的完整实现

1. 项目概述:打造一台高度可定制的DIY RGB LED时钟如果你和我一样,对市面上千篇一律的电子钟感到审美疲劳,同时又对Arduino和电子DIY充满热情,那么这个项目可能就是为你准备的。我们不是在简单地组装一个套件,而是在亲…...

Vue3 图片标框功能实现方案

基于 Vue3 组合式 API 的图片标框(画框、标注、选框)完整实现,核心逻辑封装在 GetBoxes 组件里,复制就能用 一、功能说明 ✅ 在图片上鼠标拖拽画矩形框 ✅ 实时显示框坐标(x, y, width, height) ✅ 支持多…...

BurpSuite 2025插件开发JDK版本兼容性实战指南

1. 为什么BurpSuite插件开发环境总在JDK版本上翻车?你是不是也经历过:下载好BurpSuite最新版2025.4,兴冲冲打开插件开发文档,照着官方示例写完第一个HelloWorld插件,一编译——java.lang.UnsupportedClassVersionError…...

HarmonyOS ArkTS DateUtil 日期增减与日历计算完整指南

文章目录 背景一、引言二、日期增减方法详解使用示例 三、日历计算方法详解四、Demo 演示:日期增减结果展示五、Demo 演示:月历视图完整实现六、日历视图关键点解析为什么要填充前置空格?getLastDayOfMonth 的实现技巧 七、小结 背景 近期发现…...

学术写作创新突破!2026全流程AI论文工具精选指南

2026 年 AI 论文写作工具已进入全流程闭环 学术合规时代,千笔 AI(综合评分 99 分)中文学术场景标杆;Grammarly Academic与Elicit为英文论文写作首选;按需求匹配度 - 数据可信度 - 成本承受力三维模型选型,…...

别急着扔!12年老ThinkPad X230升级SSD和内存后,Win10流畅得像新电脑

12年老ThinkPad X230重生指南:极简升级打造流畅办公利器每次打开抽屉看到那台积灰的ThinkPad X230,总有种说不出的情感。这款2012年问世的经典商务本,曾陪伴无数人度过加班到凌晨的夜晚。如今性能确实有些力不从心,但直接丢弃又觉…...

Keil µVision链接器错误204解决方案

1. 问题现象与背景解析最近在使用Keil Vision进行嵌入式开发时,不少工程师遇到了一个令人头疼的链接器错误。具体表现为编译时出现"FATAL ERROR 204: INVALID KEYWORD"的致命错误,错误位置指向链接器控制文件中的特定行。这个问题在C166和C51两…...

开源ELM327 OBD-II适配器:从硬件设计到多协议固件实现全解析

1. 项目概述:开源ELM327 OBD适配器如果你对汽车诊断、数据监控或者嵌入式开发感兴趣,那么自己动手做一个OBD-II适配器绝对是个能让你学到很多东西的硬核项目。今天要聊的,就是一个完全开源的、基于NXP LPC1517微控制器的ELM327兼容OBD适配器。…...

RevSSH反向SSH隧道:无公网IP设备的安全远程运维方案

1. 这不是又一个SSH封装工具——RevSSH解决的是“根本性连接悖论”你有没有遇到过这样的场景:一台部署在客户内网的嵌入式设备,没有公网IP,NAT穿透失败,防火墙策略死死锁住所有入向端口,连ICMP都被禁了;或者…...