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

使用nodejs和html布局一个简单的视频播放网站，但是使用localhost:端口访问html无法加载视频

news 2025/12/31 3:26:07

js代码：

// app.js
const express = require('express');
const path = require('path');
const app = express();// 设置静态文件目录，这里假设你的视频文件在public/videos/目录下
app.use(express.static(path.join(__dirname, '')));// 设置主页路由，指向一个包含HTML5 video元素的页面
app.get('/', (req, res) => {res.sendFile(path.join(__dirname, 'test.html'));
});// 启动服务器
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

html代码：

<!-- public/views/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Video Player</title>
</head>
<body><h1>hello</h1><video width="640" height="360" controls><!-- 视频路径相对于static目录 --><source src="./videos/111.mp4" type="video/mp4"></video><img src="./videos/qq1.png" alt=""></body>
</html>

在vscode中直接打开test.html可以正常加载视频。但是使用node 启动js监听端口然后调用test.html就不行，不能加载html文件。

文件目录结构：

--videos

        --111.mp4

        ---qq1.png

--test.js

--test.html

问题，发现是localhost访问时地址不对。浏览器会直接访问localhost:3001/111.mp4

所以这里需要设置路径映射

其实这段代码：

app.use(express.static(path.join(__dirname, '')));

就是用来设置路径映射的，只是最开始没有设置正确。

这里将代码改为：

app.use(express.static(path.join(__dirname, 'videos')));

将路径映射到videos文件夹，然后就可以读取到videos文件夹下的文件。

修改后代码：

js:

// app.js
const express = require('express');
const path = require('path');
const app = express();// 设置静态文件目录，这里假设你的视频文件在public/videos/目录下
app.use(express.static(path.join(__dirname, 'videos')));// 设置主页路由，指向一个包含HTML5 video元素的页面
app.get('/', (req, res) => {res.sendFile(path.join(__dirname, 'test.html'));
});// 启动服务器
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

html:

<!-- public/views/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Video Player</title>
</head>
<body><h1>hello</h1><video width="640" height="360" controls><!-- 视频路径相对于static目录 --><source src="111.mp4" type="video/mp4"></video><img src="./qq1.png" alt=""></body>
</html>

相关文章：

使用nodejs和html布局一个简单的视频播放网站，但是使用localhost:端口访问html无法加载视频

js代码&#xff1a; // app.js const express require(express); const path require(path); const app express();// 设置静态文件目录&#xff0c;这里假设你的视频文件在public/videos/目录下 app.use(express.static(path.join(__dirname, )));// 设置主页路由&#xf…...

编程日记 2024/2/4 18:24:24

【AG32VF407】国产MCU+FPGA Verilog双边沿检测输出方波

视频讲解 [AG32VF407]国产MCUFPGA Verilog双边沿检测输出方波 实验过程 本次使用使用AG32VF407开发板中的FPGA&#xff0c;使用双clk的双边沿进行检测&#xff0c;同步输出方波 同时可以根据输出的方波检测clk的频率&#xff0c;以及双clk的相位关系&#xff0c;如下为verilog…...

编程日记 2024/2/4 18:21:22

[晓理紫]每日论文分享(有中文摘要，源码或项目地址)--强化学习、模仿学习、机器人

专属领域论文订阅 关注{晓理紫}&#xff0c;每日更新论文&#xff0c;如感兴趣&#xff0c;请转发给有需要的同学&#xff0c;谢谢支持 如果你感觉对你有所帮助&#xff0c;请关注我&#xff0c;每日准时为你推送最新论文。 为了答谢各位网友的支持&#xff0c;从今日起免费为3…...

编程日记 2024/2/4 18:17:19

为什么说TiDB在线扩容对业务几乎没有影响

作者&#xff1a; 数据源的TiDB学习之路 原文来源&#xff1a; https://tidb.net/blog/e82b2c5f 当前的数据库种类繁多&#xff0c;墨天轮当前统计的所有国产数据库已经有 290个 &#xff0c;其中属于关系型数据库的有 166个 。关系型数据库从部署架构上又可以分为集中式…...

编程日记 2024/2/4 18:16:17

STM32--SPI通信协议（2）W25Q64简介

一、W25Q64简介 1、W25Qxx中的xx是不同的数字&#xff0c;表示了这个芯片不同的存储容量&#xff1b; 2、存储器分为易失性与非易失性&#xff0c;主要区别是存储的数据是否是掉电不丢失&#xff1a; 易失性存储器&#xff1a;SRAM、DRAM&#xff1b; 非易失性存储器&#xff…...

编程日记 2024/2/4 18:15:17

svn安装与搭建

1、svn搭建 # yum install subversion -y //安装 # svnserve --version //查看版本 2、创建仓库目录repo # mkdir -p /opt/svn/repo //创建目录 # svnadmin create /opt/svn/repo/ //创建新仓库 # ls !$ …...

编程日记 2024/2/4 18:14:16

什么是缓存击穿、缓存穿透、缓存雪崩？

缓存雪崩 缓存雪崩是指缓存同一时间大面积的失效&#xff0c;所以&#xff0c;后面的请求都会落到数据库上&#xff0c;造成数据库短时间内承受大量请求而崩掉。 解决方案 缓存数据的过期时间设置随机&#xff0c;防止同一时间大量数据过期现象发生。一般并发量不是特别多的时…...

编程日记 2024/2/4 18:12:14

springboot153相亲网站

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…...

编程日记 2024/2/4 18:11:13

CMake生成osg的FFMPEG插件及Windows下不生成VS工程问题解决

在Windows下&#xff0c;如何利用CMake生成osg的FFMPEG插件&#xff0c;请参考如下博文&#xff0c;同生成jpeg插件类似&#xff1a; osg第三方插件的编译方法&#xff08;以jpeg插件来讲解&#xff09;。 如下为生成FFMPEG时必要的设置&#xff1a; 注意&#xff1a; 一定要…...

编程日记 2024/2/4 18:06:09

代码随想录算法训练营Day25 | 216.组合总和III、17.电话号码的字母组合

216.组合总和III 与77.组合差不多&#xff0c;就返回条件中收集结果步骤多了一步判断&#xff0c;同时剪枝策略多了一种 vector<vector<int>> ans; vector<int> path; int sum 0;void backtracking(int num, int& k, int& n) {if (path.size() k…...

编程日记 2024/2/4 18:05:08

故障诊断 | 一文解决，SVM支持向量机的故障诊断（Matlab）

效果一览 文章概述 故障诊断 | 一文解决，SVM支持向量机的故障诊断（Matlab） 支持向量机（Support Vector Machine，SVM）是一种常用的监督学习算法，用于分类和回归分析。SVM的主要目标是找到一个最优的超平面（或者在非线性情况下是一个最优的超曲面），将不同类别的样本分开…...

编程日记 2024/2/4 18:04:06

12.1 Web开发_DOMBOM:JS关联CSS(❤❤)

12.1 Web开发_DOM&BOM 1. DOM&BOM2. DOM:文档对象模型2.1 获取页面元素1. getElementById2. getElementsByClassName3. querySelector3. 事件3.1 事件三要素3.2 绑定事件的三种方式1. 标签on2. 对象.on事件3. addEventListener3.3 常用事件...

编程日记 2024/2/4 18:02:04

scoped样式隔离原理

在 Vue 中&#xff0c;作用域样式&#xff08;Scoped Styles&#xff09;是通过以下原理实现的&#xff1a; 1、唯一选择器&#xff1a; 当 Vue 编译单文件组件时&#xff0c;在样式中使用 scoped 特性或 module 特性时&#xff0c;Vue 会为每个样式选择器生成一个唯一的属性…...

编程日记 2024/2/4 18:01:03

降价不是杀手锏，和府捞面打起“养生牌”

餐饮&#xff0c;“走进来”易&#xff0c;“走上去”难。 作为一个低门槛的创业赛道&#xff0c;每年都有数以万计怀着掘金梦的创业者涌入餐饮业。但是&#xff0c;每年也有无数个理由让餐饮经营者黯然离场。根据辰智大数据预测&#xff0c;2023全年餐饮开店率35.5%&#xff…...

编程日记 2024/2/4 18:00:02

在WORD中设置公式居中编号右对齐设置方式

1 软件环境 Office Microsoft Office LTSC 专业增强版2021 2 最终效果 3 操作步骤 编辑公式&#xff1b;光标定位到公式的最后&#xff08;不是行的最后&#xff09;&#xff1b;输入#编号光标定位在公式最后&#xff08;不是行的最后&#xff09;&#xff0c;按Enter键回车…...

编程日记 2024/2/4 17:59:00

如何使用 Supabase Auth 在您的应用程序中设置身份验证

在本文中&#xff0c;您将学习基本的关键概念&#xff0c;这些概念将帮助您掌握身份验证和授权的工作原理。 您将首先了解什么是身份验证和授权&#xff0c;然后了解如何使用 Supabase auth 在应用程序中实现身份验证。 &#xff08;本文内容参考&#xff1a;java567.com&…...

编程日记 2024/2/4 17:55:58

带libc源码gdb动态调试（导入glibc库使得可执行文件动态调试时可看见调用库函数源码）

文章目录 参考部分查看源码是否编译时有-g调试信息和符号表在 gdb 中加载 debug 文件/符号表将 debug 文件放入 ".debug" 文件夹通过 gdb 命令 set debug-file-directory directories GCC的gcc和g区别指定gcc/g&#xff0c;glibc的版本进行编译指定gcc/g的版本指定gl…...

编程日记 2024/2/4 17:54:57

初级通信工程师-通信动力与环境

1、 动力与环境的组成和基本要求 ● 动力与环境的组成&#xff1a; 通信电源系统、机房空调系统、动力环境集中监控管理系统与能耗监测管理系统和接地系统与防雷系统。 ● 网络通信设备对动力与环境的基本要求&#xff1a; 网络通信设备对动力与环境最根本的要求&#xff0c;…...

编程日记 2024/2/4 17:51:55

clickhouse在MES中的应用-跟踪扫描

开发的MES&#xff0c;往往都要做生产执行跟踪扫描&#xff0c;这样会产生大量的扫描数据&#xff0c;用关系型数据库&#xff0c;很容易造成查询冲突的问题。 生产跟踪扫描就发生的密度是非常高的&#xff0c;每个零部件的加工过程&#xff0c;都要被记录下来&#xff0c;特别…...

编程日记 2024/2/4 17:46:51

适用于嵌入式单片机的压缩算法

1. 简介 因为MCU的内存和算力的限制&#xff0c;那些对内存消耗大或算力需求大的压缩算法就不适合在MCU中使用。适用于MCU的压缩算法主要有&#xff1a;RLE、LZ77、Huffman、LZO、DEFLATE、LZ4。 2. 算法 2.1. RLE RLE(Run Length Encoding)&#xff0c;也称为行程编码&…...

编程日记 2024/2/4 17:40:45

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/12/30 19:40:49

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/12/31 0:23:01

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/12/29 15:41:43

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/12/26 8:41:58

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/12/28 3:24:23

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/12/31 0:03:09

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/12/16 19:44:25

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/12/22 9:45:59