亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在本地應用程序中使用Node/Express將本地視頻文件加載到HTML5播放器中?

如何在本地應用程序中使用Node/Express將本地視頻文件加載到HTML5播放器中?

千巷貓影 2023-07-14 15:31:09
我正在嘗試編寫一個 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>
查看完整描述

2 回答

?
慕桂英4014372

TA貢獻1871條經驗 獲得超13個贊

您可以使用 Vanilla JS URL.createObjectURL 來完成此操作。只需使用表單添加視頻,然后使用視頻標簽中的 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>

查看完整回答
反對 回復 2023-07-14
?
慕絲7291255

TA貢獻1859條經驗 獲得超6個贊

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

是的。您無法使用文件輸入從本地磁盤中選取文件以供 Web 服務器使用。即使服務器在同一臺計算機上運行也不會。

是否有可能使用 Node/Express 獲得真實路徑,如果可以,如何最好地實現?

使用fs模塊讀取文件系統并將該數據從服務器發送到瀏覽器。


您可能還想查看 Electron.js,它是為使用 Node.js 和嵌入式瀏覽器構建桌面應用程序而設計的。它使用允許您讀取文件路徑的 API 擴展了瀏覽器。


查看完整回答
反對 回復 2023-07-14
  • 2 回答
  • 0 關注
  • 203 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號