为什么我的视频元素不能在移动设备上呈现，而是在桌面上呈现？-解网

问：

我正在尝试使用JS从与我的JS脚本位于同一位置的目录中的文件路径中呈现html视频元素。我可以在桌面上看到这些视频，但由于某种原因，它们没有出现在移动设备上。下面是所有代码，谢谢。

上下文：我在 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>

我试图通过在目录名称前添加“./”来更改文件路径，但没有成功。我还试图通过单击按钮来加载它们，但这在移动设备上也不起作用，但它确实在桌面上起作用。

JavaScript HTML Apache 树莓派

为什么我的视频元素不能在移动设备上呈现，而是在桌面上呈现？

Why won't my video elements render on mobile but will render on desktop?

评论

评论