如何在本地应用程序中使用Node/Express将本地视频文件加载到HTML5播放器中？
我正在尝试编写一个 HTML5 视频播放器。它只会在本地运行，永远不会在网络上运行。我正在尝试使用 Node 和 Express。我是节点新手。我创建了一个 HTML 播放器和一个 Node 脚本，我用它们来让播放器在 Node 服务器中运行。我需要能够浏览本地硬盘上的视频文件并将其加载到播放器中，就像使用 VLC 一样。我知道出于安全原因，Javascript 替代了 fakepath。是否有可能使用 Node/Express 获得真实路径，如果可以，如何最好地实现？我一直困惑于如何使用文件输入按钮获取本地保存的视频的文件名和路径，然后使用 Node/Express 将视频加载到 HTML5 播放器中。
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.use('/media/', express.static(__dirname + '/media/'));
app.get ('/', function(req, res){
res.sendFile(__dirname + '/player.html');
});
http.listen(80, function(){
console.log('listening on *:80');
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="media/player.css">
</head>
<body>
<div id="wrapper">
<div id='player_wrapper'>
<video id='video_player' width="640" muted controls>
</video>
<div id='player_controls'>
<input type="image" src="media/back.png" onclick="seek_back()" id="seek_back">
<input type="image" src="media/forwards.png" onclick="seek_forwards()" id="seek_forwards">
<input id="file-input" type="file" />
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() { startplayer(); }, false);
var player;
function startplayer() {
player = document.getElementById('video_player');
}
function play_vid() {
player.play();
}
function pause_vid() {
player.pause();
}
function stop_vid() {
player.pause();
player.currentTime = 0;
}
function seek_forwards() {
player.pause();
var now = player.currentTime;
player.currentTime = now + 0.5;
}
function seek_back() {
player.pause();
var now = player.currentTime;
player.currentTime = now - 0.5;
}
</script>
</body>
</html>
千巷猫影2回答
-
慕桂英4014372
您可以使用 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> -
慕丝7291255
我知道出于安全原因 Javascript 替代了 fakepath是的。您无法使用文件输入从本地磁盘中选取文件以供 Web 服务器使用。即使服务器在同一台计算机上运行也不会。是否有可能使用 Node/Express 获得真实路径，如果可以，如何最好地实现？使用fs模块读取文件系统并将该数据从服务器发送到浏览器。您可能还想查看 Electron.js，它是为使用 Node.js 和嵌入式浏览器构建桌面应用程序而设计的。它使用允许您读取文件路径的 API 扩展了浏览器。
随时随地看视频慕课网APP
相关分类
JavaScript