'How to send URL of video from one html file to another using flask
Trying to create a simple website consisting of two webpages
- Few radio buttons to choose which input/output video to display
- Displays input and output video main.py:
from flask import Flask,render_template,request,redirect, url_for
import re
app = Flask(__name__)
output_url=" "
input_url=" "
@app.route('/')
def Output_Video_url():
option = request.form.get("video")
if(option=="Video 1"):
output_url='Videos\output_1.avi'
input_url='Videos\1.mp4'
#return redirect(url_for('Display_video', input_url=input_url,output_url=output_url))
elif(option=="Video 2"):
output_url='Videos\output_2'
input_url='Videos\2.mp4'
#return redirect(url_for('Display_video', input_url=input_url,output_url=output_url))
elif(option=="Video 3"):
output_url='Videos\output_3'
input_url='Videos\3.mp4'
#return redirect(url_for('Display_video', input_url=input_url,output_url=output_url))
elif(option=="Video 4"):
output_url='Videos\output_4'
input_url='Videos\4.mp4'
#return redirect(url_for('Display_video', input_url=input_url,output_url=output_url))
elif(option=="Video 5"):
output_url='Videos\output_5'
input_url='Videos\5.mp4'
#return redirect(url_for('Display_video', input_url=input_url,output_url=output_url))
elif(option=="Video 6"):
output_url='Videos\output_6'
input_url='Videos\6.mp4'
#return redirect(url_for('Display_video', input_url=input_url,output_url=output_url))
elif(option=="Video 7"):
output_url='Videos\output_7'
input_url='Videos\7.mp4'
#return redirect(url_for('Display_video', input_url=input_url,output_url=output_url))
else:
output_url='Videos\output_8'
input_url='Videos\8.mp4'
#return redirect(url_for('Display_video', input_url=input_url,output_url=output_url))
return render_template('Social_distanc_detection.html')
@app.route('/Display_video', methods=['GET', 'POST'])
def Display_video():
return render_template('Display_video.html',input_url=input_url,output_url=output_url)
if __name__ == "__main__":
app.run(debug=True)
Social_distanc_detection.html
<html>
<head>
<meta charset="UTF-8">
<title> Social Distance Detection </title>
<link rel="stylesheet" href="D:\Web-page\static\style.css">
</head>
<body></br></br></br></br></br>
<div align="center">
<div align="center">
<div>
<h1>Please Choose Video</h1>
</div></br></br></br>
<h2>
<form method="post" method="post">
<input type="radio" id="video1" name="video" value="Video 1">
<label for="video1">Video 1:</label><br>
<input type="radio" id="video2" name="video" value="Video 2">
<label for="video2">Video 2:</label><br>
<input type="radio" id="video3" name="video" value="Video 3">
<label for="video3">Video 3:</label><br>
<input type="radio" id="video4" name="video" value="Video 4">
<label for="video4">Video 4:</label><br>
<input type="radio" id="video5" name="video" value="Video 5">
<label for="video5">Video 5:</label><br>
<input type="radio" id="video6" name="video" value="Video 6">
<label for="video6">Video 6:</label><br>
<input type="radio" id="video7" name="video" value="Video 7">
<label for="video7">Video 7:</label><br>
<input type="radio" id="video8" name="video" value="Video 8">
<label for="video8">Video 8:</label><br>
<br>
<input type="submit" value="Submit">
</form>
</h2>
</div>
</div>
</body>
</html>
Display_video.html
<html>
<head>
<meta charset="UTF-8">
<title> Display Videos </title>
<link rel="stylesheet" href="D:\Web-page\static\style.css">
</head>
<body></br></br></br></br></br></body>
<div id="wrapper">
<div id="home1">
<h1>Input video</h1>
<video width="400" height="300" poster="images/video.jpg" controls="controls" preload="none">
<source type="video/mp4" src={{input_url}} />
</video>
</div>
<div id="home2">
<h1>Output video</h1>
<video width="400" height="300" poster="images/video.jpg" controls="controls" preload="none">
<source type="video/mp4" src={{output_url}}
</div>
</div>
</body>
</html>
Videos are stored in videos folder in project folder D:\Web-page\Videos
Displays Social_distanc_detection.html, but on clicking submit gives 405: The method is not allowed for the requested URL error
Solution 1:[1]
It seems that when you submit, it's trying to send a POST request to the social_distance_detection route (/) which is only set up for GET requests.
You could try putting this in your <form> tag:
action="/Display_video" method="get"
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | HeyHoo |
