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

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

I am trying to code an HTML5 video player. It will only ever be run locally, never on the web. I'm attempting to use Node and Express. I am new to Node. I have created an HTML player and a Node script, which I have used to get a player running in a Node server. I need to be able to browse video files on the local hard drive and load them into the player as one might do, for example, with VLC. I'm aware that Javascript substitutes a fakepath for security reasons. Is it possible to get a real path using Node/Express, and if so, how is best achieved? I'm stuck on how to use the file input button to get a filename and path for a locally held video, and then to load the video into the HTML5 player using Node/Express.

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>

Solution

you can do this with Vanilla JS URL.createObjectURL (MDN). Simply use a form to add a video, and then use the URL in the video tag.

<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>

Here's a working example