Node.js 如何向HTML5播放器发送Post请求?
我有一个工作请求。我从stackoverflow拿的。当浏览器向express node发出get请求时,js服务器视频开始播放。但我想将其更改为post请求,因为我想选择我想要的视频。所以我想在不刷新页面的情况下更改播放器视频。我将此方法更改为post,并向其添加了主体解析器。以下是我的方法:Node.js 如何向HTML5播放器发送Post请求?,node.js,express,post,html5-video,Node.js,Express,Post,Html5 Video,我有一个工作请求。我从stackoverflow拿的。当浏览器向express node发出get请求时,js服务器视频开始播放。但我想将其更改为post请求,因为我想选择我想要的视频。所以我想在不刷新页面的情况下更改播放器视频。我将此方法更改为post,并向其添加了主体解析器。以下是我的方法: app.post('/api/video', urlencodedParser , function(req, res) { var folder = req.body.folder var p
app.post('/api/video', urlencodedParser , function(req, res) {
var folder = req.body.folder
var path = 'D:/VideoDirectory/'+ folder + '/clip.mp4'
const stat = fs.statSync(path)
const fileSize = stat.size
const range = req.headers.range
if (range) {
const parts = range.replace(/bytes=/, "").split("-")
const start = parseInt(parts[0], 10)
const end = parts[1]
? parseInt(parts[1], 10)
: fileSize-1
const chunksize = (end-start)+1
const file = fs.createReadStream(path, {start, end})
const head = {
'Content-Range': `bytes ${start}-${end}/${fileSize}`,
'Accept-Ranges': 'bytes',
'Content-Length': chunksize,
'Content-Type': 'video/mp4',
}
res.writeHead(206, head)
file.pipe(res)
} else {
const head = {
'Content-Length': fileSize,
'Content-Type': 'video/mp4',
}
res.writeHead(200, head)
fs.createReadStream(path).pipe(res)
}
})
下面是我的ajax post请求:
var folder = {folder: "testFolder"}
$.ajax({
type: 'POST',
url: '/api/video',
data: folder,
success: function(data){
alert('post request sent');
}
});
}
在我发出此帖子请求后,视频将进入浏览器。我知道这一点,因为internet下载管理器试图捕捉它。它具有正确的文件大小。但这段视频并没有传到html5播放器上。我怎样才能用这个帖子回复给玩家呢?我想在不重新设计页面的情况下更改视频。这里是我的html5视频播放器代码:
<video id="videoPlayer" controls>
<source src="http://xxx.xxx.xx.xx:4000/api/video" type="video/mp4">
</video>
感谢@btzr,我使用了带有参数的get请求。这是最后一张表格:
app.get('/api/video/:folder' , function(req, res) {
var streamer = req.params.folder
const path = 'D:/VideoDirectory/' + folder+ '/clip.mp4'
const stat = fs.statSync(path)
const fileSize = stat.size
const range = req.headers.range
if (range) {
const parts = range.replace(/bytes=/, "").split("-")
const start = parseInt(parts[0], 10)
const end = parts[1]
? parseInt(parts[1], 10)
: fileSize-1
const chunksize = (end-start)+1
const file = fs.createReadStream(path, {start, end})
const head = {
'Content-Range': `bytes ${start}-${end}/${fileSize}`,
'Accept-Ranges': 'bytes',
'Content-Length': chunksize,
'Content-Type': 'video/mp4',
}
res.writeHead(206, head)
file.pipe(res)
} else {
const head = {
'Content-Length': fileSize,
'Content-Type': 'video/mp4',
}
res.writeHead(200, head)
fs.createReadStream(path).pipe(res)
}
})
我只是用javascript更改视频播放器的src:
var player = document.getElementById('videoPlayer');
player.src = 'http://xxx.xxx.xx.xx:4000/api/video/' + folder;
视频播放器在src更新时向服务器发出get请求。检查此项:我认为您不需要post请求:app.get'/videos/:folder',routes.sample;是的,成功了。我使用带有参数的get请求。谢谢你的提示!你可以写下来作为答案。你也可以回答自己的问题: