Error Retrieving Video File in Flask: 404 Not Found Issue

Question

Error Retrieving Video File in Flask: 404 Not Found Issue

I'm having trouble with displaying static files on my Flask website and would really appreciate some help since I don't have much experience in web development.

Sorry if I'm not explaining clearly, but here's the issue:

Problem: Whenever I try to load static files (specifically an mp4 video) on my Flask site, I constantly get a 404 error. Despite checking file paths and permissions, I can't seem to fix the problem. I know there are many similar questions about serving static files, but the solutions provided haven't worked for me, especially since I just want to add a background video to my site.

Here are the relevant code snippets from my Flask app:

Setting up Flask application

app = Flask(__name__)
app._static_folder = '/static'

HTML/CSS for background video

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barcode Wall Control Server</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670508081314131506172752495449574a060b170f0656">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        @media screen and (max-height: 450px) {
            .sidebar {padding-top: 15px;}
            .sidebar a {font-size: 18px;}
        }

        #mainContent {
        padding: 20px;
        }

        /*Video Background */
        #backVideo {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
            overflow: hidden;
        }

    </style>
</head>
<body style="background-color: #b8b7b74f;">

    <video autoplay loop muted id="backVideo">
        <source src="{{url_for('static', filename='barcode.mp4')}}" type="video/mp4">
    </video>
</body>

When I try to load the static files, my terminal shows this error message:

[15/May/2024 14:38:46] "GET /static/barcode.mp4 HTTP/1.1" 404

PS. The HTML code works fine when run without the server.

html css linux flask

Answer 1

Answer №1

It seems like there are a couple of issues to address here. Firstly, the version of Flask you're using should be specified for clarity. I don't recall ever seeing an option to set the static path with _static_folder (with an underscore prefix).

To configure it properly, you can use the static_folder property of the Flask instance or pass a static_folder=... argument to the Flask constructor.

Another aspect to consider is that the path should either be relative or an absolute path (e.g., /static on your file system), which I assume is not what you're aiming for -- although it does work. According to the documentation, it should be "Relative to the application root_path or an absolute path."

To rectify this, you may want to update your code to something like:

app = Flask(__name__, static_folder="static") 
# or 
# app.static_folder = "static"

Furthermore, keep in mind that static is the default setting. If this isn't functioning as expected, ensure the static folder is correctly located based on the application's root_path. For instance,

├── app
│   ├── __init__.py
│   ├── routes.py
│   └── *static*

To troubleshoot why static assets aren't getting served, try running the following script after initializing your Flask instance:

print(app.root_path)
print(app.has_static_folder)
print(app.static_folder)
import os
names = os.listdir(os.path.join(app.static_folder))
print(names) # list of static files

Answer 2

It seems like there are a couple of issues to address here. Firstly, the version of Flask you're using should be specified for clarity. I don't recall ever seeing an option to set the static path with _static_folder (with an underscore prefix).

To configure it properly, you can use the static_folder property of the Flask instance or pass a static_folder=... argument to the Flask constructor.

Another aspect to consider is that the path should either be relative or an absolute path (e.g., /static on your file system), which I assume is not what you're aiming for -- although it does work. According to the documentation, it should be "Relative to the application root_path or an absolute path."

To rectify this, you may want to update your code to something like:

app = Flask(__name__, static_folder="static") 
# or 
# app.static_folder = "static"

Furthermore, keep in mind that static is the default setting. If this isn't functioning as expected, ensure the static folder is correctly located based on the application's root_path. For instance,

├── app
│   ├── __init__.py
│   ├── routes.py
│   └── *static*

To troubleshoot why static assets aren't getting served, try running the following script after initializing your Flask instance:

print(app.root_path)
print(app.has_static_folder)
print(app.static_folder)
import os
names = os.listdir(os.path.join(app.static_folder))
print(names) # list of static files

Error Retrieving Video File in Flask: 404 Not Found Issue

Setting up Flask application

HTML/CSS for background video

Answer №1

Similar questions

Codeigniter: How Ajax handles data transmission without sending any information

Adding Content Dynamically Before an HTML Element with CSS During Runtime

Center the content within the div

The background color is not extending to the edges of the row or column

What is the reason behind the addition of the prefix 'ctl00_ctl00' to my ASP.NET page's HTML element IDs, causing a disruption in the design aesthetics?

Incorporating personalized CSS styles into a Bootstrap 4 card

tips on toggling div visibility based on data filtering

PHP - Unexpected behavior while using a switch statement for auto-incrementing variable inside a while loop

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

Device identification verification similar to that of Google and Facebook

Guide on playing two HTML5 videos simultaneously once they have been loaded

Troubleshooting: Resolving the error message "SyntaxError: Unexpected token '<'"

What is the best way to remove CSS styling from a select element?

Constructor for 'dojox.mobile.RoundRectCategory' could not be located

What is the best way to place a horizontal line behind buttons in a design?

An Xpath expression that functions perfectly in Firefox isn't working as expected in Selenium

The background color is not displaying correctly on the <div> element

What is the best way to anchor the components to a specific location on the screen in ASP.NET?

Create a dynamic webpage where two div elements glide in opposite directions

Firefox not responding to mouse movements