0

Flask と javascript で Python を使用して Web アプリケーションを構築しています。YouTube Data API (python) と YouTube player API (javascript) を使用しています。

私はすでにいくつかの Web アプリケーションを開発しましたが、何らかのロジックがサーバーまたはクライアントのどちらから機能するかを判断することは、まだ漠然としています。この例から学べば、この問題についてより確かな理解が得られるでしょう。

Python のサーバーから Youtube Data API を使用して、ユーザーの検索クエリに最も関連するビデオを取得しています。

my_app.py (フラスコ上)

@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 Player API を使用することにしました。

javascript を使用した index.html

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 コードです。JavaScript で YouTube Player API を使用するには、video_id を渡す必要があります。現在のロジックが機能するには、フローは次のようになります。

  1. ユーザーが動画を検索する
  2. サーバー: ビデオを見つけて返しますvideo_id
  3. クライアント:video_idサーバーから返されたものを使用して、プレーヤーをロードし、ビデオを再生します。

最初の質問: しかし、それは不可能ではありませんか? サーバーが何かを返す前に、Javascript 関数がロードされます。サーバー メソッドから JavaScript 関数に値を渡すことは不可能です。私は正しいですか？

2 番目の質問: この場合、Python をまったく使用せず、JavaScript のみを使用してクライアント側からすべてを行う方がよいでしょうか?

3 番目の質問: これはエラーを返しますか?

<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 を保持する script タグ内に、次を使用してビデオ 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 に答える