3

My situation:

  • I have a basic HTML page (intranet) that takes a video and plays it on loop.
  • Almost every day a new video gets created and I go to the index.html and change the value of the src.
  • The web page is static on a remote display so I need to go and make a refresh to the web page.

HTML Code

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Cache-control" content="no-cache">
        <meta http-equiv="Expires" content="-1">
        <style>
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
                font-family: Arial;
                font-size: 17px;
            }

            #myVideo {
                position: fixed;
                min-width: 100%;
                min-height: 100%;
            }

            video {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>

        <video autoplay muted loop id="myVideo">
            <source src="Videos/filename.mp4" type="video/mp4">
        </video>
        <script>
            window.setInterval('refresh()', 12000);     // Call a function every 12000 milliseconds (OR 12 seconds).

            // Refresh or reload page.
            function refresh() {
                window .location.reload();
            }
        </script>
    </body>
</html>

Updates implemented

  • I've implemented a refresh function that happens every 12 seconds.
  • It will show up the new video that I put on the index.html

Additional behaviours

  • I have seen that if I use the same old file name on the new video it will not show up the newest on the page.
  • I need to go and make a Ctrl + F5 on the remote display and sometimes needs to close the web browser and open it again.
  • If I used a different filename on the new video, the previous situation does not happen.

What do I want to achieve?

  • If I or anyone else puts a new file on the folder dedicated to the videos I would like that the page gets that file and plays it.

I've seen here that with Node.js, I can get the newest file on a folder and save the name on a variable but,

  • Is there a way to do this by keeping it just with javascript and HTML? (or with ASP.NET/C#)
  • Have you used/implemented something similar (with pictures, documents, etc.)? What technologies did you use?

Regards

Moises Gonzaga
  • 151
  • 1
  • 17
  • 1
    This is quite easy to build with c# and any other server technology. You'll find a lot of existing answers in the web and it makes so sense to repeat all this here. Have you see questions like https://stackoverflow.com/questions/1179970/how-to-find-the-most-recent-file-in-a-directory-using-net-and-without-looping, https://stackoverflow.com/questions/59593310/streaming-videos-with-asp-net-core-3, https://stackoverflow.com/questions/38231739/how-to-disable-browser-cache-in-asp-net-core-rc2,... just to name a few? – Christoph Lütjen Dec 10 '21 at 20:50
  • You could also go the web server only route without c# or node or anything and simply disable caching. The answer for this soultion depends on the web server you're using. – Christoph Lütjen Dec 10 '21 at 20:55

1 Answers1

1

Is there a way to do this by keeping it just with javascript and HTML? (or with ASP.NET/C#)

Plain JavaScript and HTML are client side static code. It cannot modify anything stored on the server. You will need a server side application to handle your video uploads, querying, etc. Pretty much all server side languages supports this feature (PHP, ASP, NodeJS, C++, Go, Rust...)

Have you used/implemented something similar (with pictures, documents, etc.)? What technologies did you use?

It's pretty much depends what you want to do. You can go the MVC route to render the HTML code, or going a separate approach by splitting client side and server side code and link them together with an API design.

Jamie Phan
  • 796
  • 1
  • 7
  • 26