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

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>

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

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

相关文章

LeetCode--189

189. 轮转数组 提示 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转…

Ingress

文章目录 环境准备什么是 Ingress认识 Ingress 资源Ingress 控制器(controller)Ingress 规则pathType 路径类型多重匹配Ingress 类TLS生成证书创建密钥 环境准备 下面的 yaml 文件内容&#xff0c;是使用 sts 创建两个 web 服务&#xff0c;并配置对应的 servcie。web 服务的首…

Python进行数据分析||AIGC生成的Python-Pandas库的一些主要函数及其使用实例来进行数据分析

在Python的Pandas库中,有许多函数可以用来进行数据分析。以下是一些主要函数及其使用实例: read_csv():这个函数用于从CSV文件中读取数据。例如,如果你有一个名为"my_data.csv"的文件,你可以使用以下代码来读取它:import pandas as pd data = pd.read_csv(&quo…

微信小程序(三十三)promise异步写法

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.promise异步与普通异步的写法区别 2.promise异步的优势 源码&#xff1a; index.wxml <view class"preview" bind:tap"onChoose"><image src"{{avatar}}" mode"…

PyCharm常用快捷键和设置

Ctrl Space 基本的代码完成&#xff08;类、方法、属性&#xff09; Ctrl Alt Space 快速导入任意类 Ctrl Shift Enter 语句完成 Ctrl P 参数信息&#xff08;在方法中调用参数&#xff09; Ctrl Q 快速查看文档 F1 外部文档 Shift F1 外部文档…

网络时间协议NTP工作模式

单播服务器/客户端模式 单播服务器/客户端模式运行在同步子网中层数较高层上。这种模式下,需要预先知道服务器的IP地址。 客户端:运行在客户端模式的主机(简称客户端)定期向服务器端发送报文,报文中的Mode字段设置为3(客户端模式)。当客户端接收到应答报文时,客户端会…

area_center

*模板匹配 gen_rectangle2 (Rectangle1, 1558, 1148, 0, 222, 322) reduce_domain (ImageAffinTrans, Rectangle1, ImageReduced) binary_threshold (ImageReduced, Region, max_separability, dark, UsedThreshold) connection (Region, ConnectedRegions) select_shape (Conn…

【Redis】--RedissonClient的Lock锁详解

目录 一、前言二、Lock源码解析2.1、lock()源码2.2、lock(long leaseTime,TimeUnit unit)源码2.3、trylock()源码2.4、trylock(long waitTime, long leaseTime, TimeUnit unit)源码2.5、trylock(long waitTime,TimeUnit unit)源码2.6、unlock()源码三、Lock相关代码示例一、前言…

Z字型遍历二叉树

编码过程 掏出Deque&#xff0c;先写从左往右遍历 class Solution {public List<List<Integer>> zigzagLevelOrder(TreeNode root) {Deque<TreeNode> deque new ArrayDeque<>();deque.offer(root);while (!deque.isEmpty()) {int n deque.size();f…

Chapter One - The History of Computers

Chapter One - The History of Computers 第一章 - 计算机的历史 I. Reading Material I. 阅读材料 My friends, let’s embark on an enlightening journey through the captivating history of computers, unraveling the intricate threads that have woven the technolog…

DockerCompose+SpringBoot+Nginx+Mysql实践

DockerComposeSpringBootNginxMysql实践 1、Spring Boot案例 首先我们先准备一个 Spring Boot 使用 Mysql 的小场景&#xff0c;我们做这样一个示例&#xff0c;使用 Spring Boot 做一个 Web 应 用&#xff0c;提供一个按照 IP 地址统计访问次数的方法&#xff0c;每次请求时…

linux交叉编译方法——虚拟机编译,在树莓派平台上运行

一、 交叉编译是什么 交叉编译 是在一个平台上生成另一个平台上的可执行代码。 我们再windows上面编写C51代码&#xff0c;并编译成可执行代码&#xff0c;如xx.hex, 是在c51上面运行&#xff0c;不是在windows上面运行 我们在ubuntu上面编写树…

Python实用库记录

本文主要记录一些自己遇到的一些实用的Python库&#xff0c;今日开文&#xff0c;后面会不断积累 关于Python内置知识的记录可点击 Python内置知识记录 random 作用&#xff1a;生成随机数 random.randint(a, b) 生成 [ a , b ] [a, b] [a,b] 范围内随机的整数random.unifo…

Kubernetes k8s

Kubernetes k8s 一个开源的容器编排引擎&#xff0c;用来对容器化应用进行自动化部署、 扩缩和管理。 从架构设计层面&#xff0c;k8s能很好的解决可用性&#xff0c;伸缩性&#xff1b;从部署运维层面&#xff0c;服务部署&#xff0c;服务监控&#xff0c;应用扩容和故障处…

springboot并mybatis入门启动

pom.xml,需要留意jdk的版本&#xff08;11&#xff09;和springboot版本要匹配&#xff08;2.7.4&#xff09;&#xff0c;然后还要注意mybatis启动l类的版本&#xff08;2.2.2&#xff09; <?xml version"1.0" encoding"UTF-8"?> <project xm…

MAX31865读取PT100/PT1000电阻值

1、芯片介绍 MAX31865是简单易用的热敏电阻至数字输出转换器,优化用于铂电阻温度检测器(RTD)。外部电阻设置RTD灵敏度,高精度Δ- Σ ADC将RTD电阻与基准电阻之比转换为数字输出。MAX31865输入具有高达45V的过压保护,提供可配置的RTD及电缆开路、短路条件检测。 2、芯片特点…

Java单点登录(SSO)实现指南:深度解析与全面实践

目录 引言 一、什么是单点登录&#xff08;SSO&#xff09;&#xff1f; 二、SSO的工作原理 三、SSO的具体实现 SSO的核心概念 1. 令牌&#xff08;Token&#xff09;机制 2. 身份验证协议 SSO实现步骤 1. 选择身份验证协议 2. 创建认证服务器 3. 创建资源服务器 4.…

解决Docker打包Eureka注册中心,其他服务无法注册问题

​前言 本文主要是介绍利用docker打包Eureka注册中心&#xff0c;并且发布镜像到服务器&#xff0c;遇到的一个比较坑的问题。主要是服务镜像部署完毕之后&#xff0c;docker容器都能启动&#xff0c;并且也能访问&#xff0c;但是其他服务就是无法注册到注册中心。排除问题&a…

可重入锁设计

go 实现可重入锁 实际上&#xff0c;Go 语言标准库中的 sync.Mutex 是不可重入的。但是&#xff0c;我们可以基于 sync.Mutex 实现一个可重入锁&#xff08;ReentrantLock&#xff09;。下面是一个简单的可重入锁的实现示例&#xff1a; Go 1package main 2 3import ( 4 "…

查看阿里云maven仓中某个库有哪些版本

起因 最近项目上有做视频业务&#xff0c;方案是使用阿里云的短视频服务&#xff0c;其中也有使用到阿里云的上传SDK&#xff0c;过程中有遇一个上传SDK的内部崩溃&#xff0c;崩溃栈如下&#xff1a; Back traces starts. java.lang.NullPointerException: Attempt to invok…