CODEWITHSUNDEEP
javascriptpythonweb-applicationsflask
Maximus S
Maximus S

Reputation: 11095

Server-side(python) and client-side(javascript) design and interaction

I am building a web application with Python on Flask and javascript. YouTube Data API (python) and YouTube player API(javascript) are used.

Although I have developed a few web applications already, deciding whether some logic should work from the server or client is still quite vague to me. When I learn from this example, I would have a more solid understanding regarding this matter.

I am using Youtube Data API from the server in Python to retrieve the most related video to the user's search query.

my_app.py (on Flask)

@app.route('/')
def main():
  """finds the most relevant video's id using YouTube Data API"""
  search_param = request.args.get('video_search')
  video_id = search_video(search_param)
  return render_template("index.html", video_id=video_id)

index.html

<iframe width="560" height="315" src="//www.youtube.com/embed/{{ video_id }}?autoplay=1" frameborder="0" allowfullscreen></iframe>

The above works great. However, I want more control over the YouTube player. Instead of manually embeding the video like provided, I decide to use YouTube Player API in javascript.

index.html with javascript

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('iframe-player', { //inserts into 'iframe-player'
        width: '640',
        height: '390',
        //videoId: 'M7lc1UVf-VE', <<<<< PAY ATTENTION TO THIS PART
        events: {
            'onReady': onPlayerReady, //onPlayaerReady will fire when onReady executes
            'onStateChange': onPlayerStateChange //onPlayerStateChange will fire when onStateChange executes
        }
    });
}

This is the relevant javascript code. I need to pass a video_id in order to use YouTube Player API in javascript. For the current logic to work, the flow should be like below:

  1. user searches for a video
  2. server: finds a video and returns video_id
  3. client: using video_id returned from the server, loads the player and plays the video.

First question: However, isn't it impossible to do that? Javascript functions are loaded before the server returns anything. It would be impossible to pass a value from a server method to a javascript function. Am I correct?

Second question: In this case, is it better not to use Python at all and do everything from the client side using only javascript?

Third question: Would this return error?

<div id="my_video_id">{{video_id}}</div>
<script>
  var video_id = $("#my_video_id")
</script>

Thank you. I tried my best to explain the problem. I would appreciate any help.

Upvotes: 0

Views: 740

Answers (1)

Pierre
Pierre

Reputation: 13046

You're passing the video id to the index.html template, so just use it inside your Javascript.

For example in the index.html template and inside a script tag holding your Javascript add the video id using {{ video_id }}:

<script>
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('iframe-player', {
        width: '640',
        height: '390',
        videoId: '{{ video_id }}',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
</script>

If this is not what you want you can use Ajax to get the video ID without reloading the page.

Upvotes: 1

Related Questions