Question

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

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

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

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

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

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

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
        }
    });
}

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

用户搜索视频
服务器：找到一个视频并返回video_id
客户端：使用从服务器返回的video_id，加载播放器并播放视频。

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

第二个问题： 在这种情况下，最好不要使用Python，只使用javascript从客户端执行所有操作吗？

第三个问题： 这会返回错误吗？

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

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

Answer 1

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

例如，在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>

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

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

1 个答案: