'How to send URL of video from one html file to another using flask

Trying to create a simple website consisting of two webpages

  1. Few radio buttons to choose which input/output video to display
  2. 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"

<form> tag documentation

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