Question 189362 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I realized I didn't enable CORS. After I enabled it, everything worked.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search