problem to upload and play a video flask?

Question

I m trying to upload a video and play it in an html page using flask but the problem is that it is not playing .I used the code bellow :

UPLOAD_FOLDER = 'static/'

@app.route('/')
def upload_form():
    return render_template('upload.html')


@app.route('/', methods=['POST'])
def upload_video():
    if 'file' not in request.files:
        flash('No file part')
        return redirect(request.url)
    file = request.files['file']
    if file.filename == '':
        flash('No image selected for uploading')
        return redirect(request.url)
    else:
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        # print('upload_video filename: ' + filename)
        flash('Video successfully uploaded and displayed below')
        return render_template('upload.html', filename=filename)


@app.route('/display/<filename>')
def display_video(filename):
    # print('display_video filename: ' + filename)
    return redirect(url_for('static', filename=filename), code=301)
if __name__ == '__main__':
    app.run(threaded=True)

in the html file :

<p>
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}
</p>
{% if filename %}
    <div style="margin: 10px auto;">
        <video autoplay="autoplay" controls="controls" preload="preload">
            <source src={{ url_for('display_video', filename=filename) }} type="video/mp4"></source>
        </video>
    </div>
{% endif %}
<form method="post" action="/" enctype="multipart/form-data">
    <dl>
        <p>
            <input type="file" name="file" autocomplete="off" required>
        </p>
    </dl>
    <p>
        <input type="submit" value="Upload">
    </p>
</form>

the video is uploaded but it does not play, I can't play the play button or interact with it

Answer 1

I think you should use send_from_directory to make the file accessible.

@app.route("/display/<path:filename>")
def display_video(filename):
    return send_from_directory(
        app.config['UPLOAD_FOLDER'], filename, as_attachment=True
    )

I also added quotation marks in the source tag.

<video autoplay="autoplay" controls="controls" preload="preload">
  <source src="{{ url_for('display_video', filename=filename) }}" type="video/mp4"></source>
</video>