我试图使用JS从filepaths中渲染html视频元素，该目录与我的JS脚本位于同一位置。我可以看到我的桌面上的视频，但他们不出现在移动由于某种原因。下面是所有的代码，谢谢。
- 上下文：**我在RaspberryPi上运行Apache服务器，并且允许访问目录和所有子目录。我在端口3000上运行NodeJs服务器，并使用客户端JS脚本从服务器获取文件路径，然后通过创建Video和Source元素并将它们作为子元素附加到我在html文件中编写的div元素来呈现它们。这是密码我道歉的混乱性质，我正试图学习如何建立一个网站，以允许我的网络的所有成员看到我们的家庭录像。
- NodeJs服务器文件**
import fs from 'fs';
import http from 'http'
function getFilePaths(dir){
//Returns a list containing the file paths within the specified dir, only works one level deep
const files = fs.readdirSync(dir);
const filePaths = files.map((file)=>dir + '/' + file);
return {filepaths:filePaths};
}
function main(){
const hostname = hostname;//The IP Address of my Raspberry Pi
const port = 3000;
const server = http.createServer((req, res)=>{
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end(JSON.stringify(getFilePaths('./Videos')));
});
server.listen(port, hostname, ()=>{
console.log('Server starting at http://hostname:3000')
})
}
main()- HTML文件**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
background-color: bisque;
}
h1{
text-align: center;
}
.video-container{
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
}
.video-container>video{
height: 300px;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<div id = 'video-container' class = 'video-container'>
</div>
<script async>
const videoContainer = document.getElementById('video-container')
function createVidElement(src){
const videoElement = document.createElement('video');
videoElement.controls = true;
const sourceElement = document.createElement('source');
sourceElement.src = src
videoElement.appendChild(sourceElement)
return videoElement
}
function addChildElements(parent, children){
for (child of children){
parent.appendChild(child)
}
}
async function main(){
const filepathsRes = await fetch('http://hostname:3000')
const filepathsObj = await filepathsRes.json()
const vidElements = filepathsObj.filepaths.map((filepath)=>createVidElement(filepath))
addChildElements(videoContainer, vidElements)
}
main()
</script>
</body>
</html>我试图通过在目录名前添加“./”来更改文件路径，但没有成功。我也试着通过点击一个按钮来加载它们，但这在移动设备上也不起作用，但在桌面上确实起作用。
2条答案
按热度按时间eagi6jfj1#
你应该检查你的视频扩展，它是否得到你移动的上浏览器的支持。而且还要检查视频的质量，应该只是全高清或者只是高清应该没问题。
h6my8fg22#
我意识到我没有启用CORS。我启用后，一切正常。