英文:
Why won't my video elements render on mobile but will render on desktop?
问题
我正在尝试使用JS从与我的JS脚本位于同一位置的目录中的文件路径来呈现HTML视频元素。我能够在我的桌面上看到视频，但出于某种原因它们在移动设备上不显示。以下是所有的代码，谢谢。
上下文：
我在我的RaspberryPi上运行了一个Apache服务器，并允许访问该目录及其所有子目录。我在端口3000上运行NodeJs服务器，并使用客户端JS脚本从服务器获取文件路径，然后通过创建视频和源元素，将它们附加为HTML文件中的子元素来呈现它们。这是代码。我为混乱的性质道歉，我正在努力学习如何构建一个网站，以便让我们网络中的所有成员都能看到我们的家庭视频。
NodeJs服务器文件
import fs from 'fs';
import http from 'http';
function getFilePaths(dir){
// 返回包含指定目录内文件路径的列表，仅适用于一级目录
const files = fs.readdirSync(dir);
const filePaths = files.map((file) => dir + '/' + file);
return {filepaths:filePaths};
}
function main(){
const hostname = hostname;// 我的Raspberry Pi的IP地址
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('服务器启动于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>欢迎！</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>
我尝试通过在目录名之前添加'./'来更改文件路径，但没有成功。我还尝试通过点击按钮来加载它们，但在移动设备上也没有成功，但在桌面上却成功了。
英文:
I am attempting to render html video elements using JS from filepaths in a directory in the same location as my JS script. I am able to see the videos on my desktop but they don't appear on mobile for some reason. Below is all the code, thank you.
Context:
I am running an Apache server on my RaspberryPi and I have allowed access to the directory and all subdirectories. I am running the NodeJs server on port 3000 and am using the client side JS script to fetch the filepaths from the server and then render them by creating Video and Source elements and appending them as children to a div element I have written in the html file. This is the code. I apologize for the messy nature I am trying to learn how to build a website in order to allow all members of my network to see our home videos.
NodeJs Server File
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 File
<!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>
I tried to change the filepaths by adding a './' before the directory name but it didn't work. I also tried to make them load instead by clicking a button but that didn't work on mobile either, but it did work on desktop.
答案1
得分: 1
你应该检查你的视频扩展名，看它是否得到了移动浏览器的支持。还要检查视频的质量，它应该只能是全高清，或者只有高清也可以。
英文:
You should check your videos extension, does it get support by the browser on your mobile. and also check the quality of the video, it should be only full hd or just HD should be fine.
答案2
得分: 1
我意识到我没有启用CORS。在我启用它之后，一切都正常工作了。
英文:
I realized I didn't enable CORS. After I enabled it, everything worked.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论