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
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>