如何在本地应用程序中使用 Node/Express 将本地视频文件加载到 HTML5 播放器？

Question

我正在尝试编写一个 HTML5 视频播放器。它只会在本地运行，永远不会在网络上。我正在尝试使用 Node 和 Express。我是节点的新手。我已经创建了一个 HTML 播放器和一个 Node 脚本，我用它来在 Node 服务器中获得播放器运行ning。我需要能够浏览本地硬盘驱动器上的视频文件并将它们加载到播放器中，例如，使用 VLC。我知道 Javascript 出于安全原因替代了假路径。是否可以使用 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>

Answer 1

I'm aware that Javascript substitutes a fakepath for security reasons

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

Is it possible to get a real path using Node/Express, and if so, how is best achieved?

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

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

Answer 2

您可以使用 Vanilla JS URL.createObjectURL (MDN) 来做到这一点。只需使用表单添加视频，然后在视频标签中使用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>

这是一个working example

如何在本地应用程序中使用 Node/Express 将本地视频文件加载到 HTML5 播放器？

How to use Node/Express in a local app to load local video files into an HTML5 player?

javascript

node.js

html5-video

express