服務器端（蟒蛇）和客戶端（JavaScript）設計和交互

我對搖瓶和JavaScript建立與Python的Web應用程序。使用YouTube數據API（python）和YouTube播放器API（javascript）。服務器端（蟒蛇）和客戶端（JavaScript）設計和交互

雖然我已經開發了一些Web應用程序，在決定一些邏輯是否應該從服務器工作或客戶端仍然是相當模糊的我。當我從這個例子中學習時，我會對這個問題有更深入的理解。

我使用從Python中的服務器YouTube數據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，而不是像提供的那樣手動嵌入視頻。

的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。對於當前的邏輯工作，流動應該是象下面這樣：

用戶搜索視頻
服務器：發現一個視頻，並返回video_id
客戶端：使用video_id從服務器返回，裝載播放器並播放視頻。

第一個問題： 但是，是不是就不可能做到這一點？ Javascript函數在服務器返回任何內容之前加載。將服務器方法的值傳遞給javascript函數是不可能的。我對麼？

第二個問題： 在這種情況下，最好是不要使用Python，並且儘量使用僅使用javascript的客戶端？

第三個問題： 這會返回錯誤嗎？

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

謝謝。我盡力解釋這個問題。我將不勝感激任何幫助。

來源

2013-10-18 Maximus S

你傳遞的視頻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-18 14:39:49 Pierre

反對我最初的想法，這工作得很好。 –

服務器端（蟒蛇）和客戶端（JavaScript）設計和交互

回答

相關問題