Javascript 如何在本地应用程序中使用Node/Express将本地视频文件加载到HTML5播放器中?
我正在尝试编写一个HTML5视频播放器。它将只在本地运行,而不会在web上运行。我正在尝试使用Node和Express。我不熟悉Node。我创建了一个HTML播放器和一个节点脚本,我用它来让播放器在节点服务器中运行。我需要能够浏览本地硬盘上的视频文件,并将其加载到播放器中,例如,使用VLC。我知道,出于安全原因,Javascript替代了伪路径。是否可以使用Node/Express获得真实路径,如果可以,如何实现最佳效果?我一直在研究如何使用文件输入按钮获取本地保存的视频的文件名和路径,然后使用Node/Express将视频加载到HTML5播放器中Javascript 如何在本地应用程序中使用Node/Express将本地视频文件加载到HTML5播放器中?,javascript,node.js,express,html5-video,Javascript,Node.js,Express,Html5 Video,我正在尝试编写一个HTML5视频播放器。它将只在本地运行,而不会在web上运行。我正在尝试使用Node和Express。我不熟悉Node。我创建了一个HTML播放器和一个节点脚本,我用它来让播放器在节点服务器中运行。我需要能够浏览本地硬盘上的视频文件,并将其加载到播放器中,例如,使用VLC。我知道,出于安全原因,Javascript替代了伪路径。是否可以使用Node/Express获得真实路径,如果可以,如何实现最佳效果?我一直在研究如何使用文件输入按钮获取本地保存的视频的文件名和路径,然后使用
var express=require('express');
var-app=express();
var http=require('http')。服务器(应用程序);
var io=require('socket.io')(http);
app.use('/media/',express.static(uu dirname+'/media/);
app.get('/',函数(req,res){
res.sendFile(uu dirname+'/player.html');
});
http.listen(80,函数(){
console.log('监听*:80');
});代码>
addEventListener(“DOMContentLoaded”,function(){startplayer();},false);
var播放器;
函数startplayer(){
player=document.getElementById('video_player');
}
函数播放_vid(){
player.play();
}
函数pause_vid(){
player.pause();
}
函数stop_vid(){
player.pause();
player.currentTime=0;
}
函数seek_forwards(){
player.pause();
var now=player.currentTime;
player.currentTime=现在+0.5;
}
函数seek_back(){
player.pause();
var now=player.currentTime;
player.currentTime=now-0.5;
}
我知道,出于安全原因,Javascript替代了伪路径
对。不能使用文件输入从本地磁盘中拾取文件以用于web服务器。即使服务器在同一台计算机上运行也不行
是否可以使用Node/Express获得真实路径,如果可以,如何实现最佳效果
使用fs
模块读取文件系统,并将数据从服务器发送到浏览器
您可能还想看看Electron.js,它是为使用Node.js和嵌入式浏览器构建桌面应用程序而设计的。它使用允许您读取文件路径的API扩展浏览器
我知道,出于安全原因,Javascript替代了伪路径
对。不能使用文件输入从本地磁盘中拾取文件以用于web服务器。即使服务器在同一台计算机上运行也不行
是否可以使用Node/Express获得真实路径,如果可以,如何实现最佳效果
使用fs
模块读取文件系统,并将数据从服务器发送到浏览器
您可能还想看看Electron.js,它是为使用Node.js和嵌入式浏览器构建桌面应用程序而设计的。它使用允许您读取文件路径的API扩展浏览器。您可以使用Vanilla JS URL.createObjectURL()来实现这一点。只需使用表单添加视频,然后在视频标签中使用URL
<body>
Add a video here:
<br>
<input type="file" id="video-url-example">
<br>
..and it will playback here, without any upload:
<br>
<div id="video-container" style="width: 50%"></div>
<script>
const input = document.querySelector('#video-url-example');
input.addEventListener('change', () => {
const file = input.files[0];
const url = URL.createObjectURL(file);
document.querySelector('#video-container').innerHTML = `
<video autoplay loop width="500" src="${url}" />
`;
});
</script>
</body>
在此处添加视频:
…它将在此处播放,无需任何上传:
const input=document.querySelector(“#视频url示例”);
input.addEventListener('change',()=>{
const file=input.files[0];
const url=url.createObjectURL(文件);
document.querySelector(“#视频容器”).innerHTML=`
`;
});
这里有一个您可以使用Vanilla JS URL.createObjectURL()实现这一点。只需使用表单添加视频,然后在视频标签中使用URL
<body>
Add a video here:
<br>
<input type="file" id="video-url-example">
<br>
..and it will playback here, without any upload:
<br>
<div id="video-container" style="width: 50%"></div>
<script>
const input = document.querySelector('#video-url-example');
input.addEventListener('change', () => {
const file = input.files[0];
const url = URL.createObjectURL(file);
document.querySelector('#video-container').innerHTML = `
<video autoplay loop width="500" src="${url}" />
`;
});
</script>
</body>
在此处添加视频:
…它将在此处播放,无需任何上传:
const input=document.querySelector(“#视频url示例”);
input.addEventListener('change',()=>{
const file=input.files[0];
const url=url.createObjectURL(文件);
document.querySelector(“#视频容器”).innerHTML=`
`;
});
这是一个谢谢,这是一个非常有用的方向盘。我去看看。谢谢,这是一个非常有用的方向盘。我去看看,搞定了。甚至不需要服务器,搞定了。甚至不需要服务器。