时间戳

首页 > 解决方案 > 如何在本地应用程序中使用 Node/Express 将本地视频文件加载到 HTML5 播放器中？

javascript - 如何在本地应用程序中使用 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>

标签： javascriptnode.jsexpresshtml5-video

解决方案

我知道出于安全原因，Javascript 替换了 fakepath

是的。您不能使用文件输入从本地磁盘选择文件以用于 Web 服务器。即使服务器在同一台计算机上运行也不会。

是否有可能使用 Node/Express 获得真实路径，如果可以，如何最好地实现？

使用模块读取文件系统fs并将该数据从服务器发送到浏览器。

您可能还想查看 Electron.js，它是为使用 Node.js 和嵌入式浏览器构建桌面应用程序而设计的。它使用允许您读取文件路径的 API 扩展了浏览器。

推荐阅读