CODEWITHSUNDEEP
javascriptnode.jsexpresshtml5-video
hermitjimx
hermitjimx

Reputation: 71

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>

Upvotes: 0

Views: 1248

Answers (2)

Doug Sillars
Doug Sillars

Reputation: 1755

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

Upvotes: 1

Quentin
Quentin

Reputation: 943142

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

Yes. You cannot use a file input to pick a file from your local disk for use with a web server. Not even if the server is running on the same computer.

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

To read the file system with the fs module and send that data from the server to the browser.

You might also want to look at Electron.js which is designed for building desktop applications using Node.js and an embedded browser. It extends the browser with APIs that allow you to read file paths.

Upvotes: 1

Related Questions