0

我正在用 Python 在 Flask 和 javascript 上构建一个 Web 应用程序。使用 YouTube 数据 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)

索引.html

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

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

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

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

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

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

第二个问题： 在这种情况下，最好不要使用 Python，而只使用 javascript 从客户端做所有事情？

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

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

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

4

1 回答 1

1

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

例如，在index.html模板中和包含 Javascript 的脚本标签中，使用以下命令添加视频 ID {{ 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>

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

于 2013-10-18T14:39:49.570 回答