服务器端（python）和客户端（javascript）设计和交互

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

我正在使用Flask和javascript上的Python构建Web应用程序。使用YouTube数据API（python）和YouTube播放器API（javascript）。

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.

虽然我已经开发了一些Web应用程序，但是决定某些逻辑是否可以从服务器或客户端运行对我来说仍然很模糊。当我从这个例子中学习时，我会对这个问题有更深刻的理解。

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

我在Python中使用来自服务器的Youtube Data API来检索与用户搜索查询最相关的视频。

my_app.py (on Flask)

my_app.py（在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

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

以上工作很棒。但是，我想要更多地控制YouTube播放器。我决定在javascript中使用YouTube播放器API，而不是像提供的那样手动嵌入视频。

index.html with javascript

index.html用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:

这是相关的JavaScript代码。我需要传递video_id才能在javascript中使用YouTube播放器API。要使当前的逻辑工作，流程应如下所示：

user searches for a video
用户搜索视频
server: finds a video and returns video_id
server：查找视频并返回video_id
client: using video_id returned from the server, loads the player and plays the video.
客户端：使用从服务器返回的video_id，加载播放器并播放视频。

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?

第一个问题：然而，这不可能吗？在服务器返回任何内容之前加载Javascript函数。将值从服务器方法传递给javascript函数是不可能的。我对么？

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

第二个问题：在这种情况下，最好不要使用Python，只使用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.

谢谢。我尽力解释这个问题。我将不胜感激任何帮助。

1 个解决方案

#1

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

您将视频ID传递给index.html模板，因此只需在Javascript中使用它即可。

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

例如，在index.html模板中，在包含Javascript的脚本标记内，使用{{video_id}}添加视频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.

如果这不是您想要的，您可以使用Ajax获取视频ID而无需重新加载页面。

#1