通过HTTP请求访问时视频无法播放的问题求助

1. 修正路由中的重复响应问题 #

你的根路由里连续调用了两次res.sendFile，HTTP协议要求一个请求只能返回一个响应，第二次调用会被忽略甚至引发错误。需要只返回一个包含视频的HTML文件（比如index.html）。

2. 添加静态文件托管中间件 #

浏览器通过服务器访问时，无法直接读取本地文件，必须让Express托管静态资源（视频、CSS、JS等），才能正确响应视频文件的请求。

修改后的完整代码 #

Express 代码：

var express = require('express')
var app = express()
const path = require('path')

// 托管静态资源，这里假设视频文件和HTML文件在同一目录
// 若有单独的静态资源文件夹（如public），可改为 path.join(__dirname, 'public')
app.use(express.static(__dirname))

app.get("/", function(req, res){
    res.setHeader("Content-Type","text/html")
    // 仅返回一个HTML文件
    res.sendFile(path.join(__dirname, "/index.html"))
})

app.listen(3000, function(){
    console.log("listening on port 3000")
    console.log(__dirname)
})

HTML 文件（index.html）：

<!DOCTYPE html>
<html lang="en">
<body>
    <video controls>
        <source src="vid_1.mp4" type="video/mp4" />
        <p>
          Your browser doesn't support HTML video. Here is a
          <a href="vid_1.mp4">link to the video</a> instead.
        </p>
    </video>
</body>
</html>

目录结构说明 #

确保文件目录结构如下：

你的项目文件夹/
├── index.js       # Express 代码文件
├── index.html     # 视频HTML文件
└── vid_1.mp4      # 视频文件

问题原因解析 #

• 重复响应问题：res.sendFile会发送响应并结束请求，连续调用两次不符合HTTP规范，导致响应异常。
• 静态资源未托管：直接打开本地HTML时，浏览器从本地文件系统读取视频；但通过服务器访问时，Express默认不会处理静态文件请求，需要通过express.static中间件指定静态资源目录，才能让服务器正确返回视频文件。

内容的提问来源于stack exchange，提问作者ishaan sangwan