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

问题描述 投票:0回答:2

我正在尝试编写一个 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>

javascript node.js express html5-video
2个回答
1
投票

您可以使用 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>

这是一个工作示例


1
投票

我知道出于安全原因,Javascript 替代了 fakepath

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

是否可以使用 Node/Express 获得真实路径,如果可以,如何最好地实现?

使用

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


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

© www.soinside.com 2019 - 2024. All rights reserved.