創建YouTube播放器與Data API V3

檢索到的多個視頻資源，所以我花了一天的閱讀文檔，看如何嵌入YouTube在我的網站的各種視頻更好的一部分，並取得了一些良好的進展。但我現在有點卡住了。創建YouTube播放器與Data API V3

我工作的一個網站，除其他事項外，會看我的用戶的個人資料，讓自己喜歡的球隊，然後顯示由團隊到它的官方YouTube頻道上傳的視頻。

我與數據API V3工作，並使用HTTParty。我能夠獲取視頻ID，我需要它來檢索每個視頻資源。這工作正常。這是代碼。（y_user是通道名稱，並y_key是我的API密鑰）使用頻道ID，並要求6

獲取頻道資訊....

response = HTTParty.get("https://www.googleapis.com/youtube/v3/channels?part=id%2C+snippet&forUsername=#{y_user}&key=#{y_key}") 

channel_id = response["items"][0]["id"]

新的呼叫，此時來自頻道的視頻記錄。

channel_info = HTTParty.get("https://www.googleapis.com/youtube/v3/search?part=id%2C+snippet&channelId=#{channel_id}&maxResults=6&order=date&key=#{y_key}")

從每個視頻記錄現在得到的視頻ID ..

@video_ids = [] 
channel_info["items"].each do |item| 
    @video_ids.push(item["id"]["videoId"]) 
end

獲得視頻資源爲每個視頻ID ......和取得玩家的嵌入代碼。

@videos = [] 
@video_ids.each do |video_id| 
    source = HTTParty.get("https://www.googleapis.com/youtube/v3/videos?part=id,snippet,player&id=#{video_id}&key=#{y_key}") 
    single_video = source["items"][0]["player"]["embedHtml"] 
    @videos.push(single_video) 
end

和我的HTML ....

<% @videos.each do |v| %> 
    <div class="video-slide"><%= v %></div> 
<% end %>

這是什麼返回對我來說是對應六個視頻我的要求，這正是我想要的六個I幀。你可以看到，該視頻ID對每個唯一....

<iframe type='text/html' src='http://www.youtube.com/embed/fNyKJjARuj4' width='640' height='360' frameborder='0' allowfullscreen='true'/> 

<iframe type='text/html' src='http://www.youtube.com/embed/6HxJG60kZCI' width='640' height='360' frameborder='0' allowfullscreen='true'/>

等....

什麼，我就不清楚現在是如何呈現爲每一個玩家（每個將生活在一張幻燈片）。如果我按原樣離開我的代碼，我可以看到如圖所示的iframe HTML，但沒有播放器。

但是，如果我添加.html_safe ....

<div class="video-slide"><%= v.html_safe %></div>

它呈現一個球員 - 但I幀的唯一一個。其他人完全消失，即使在檢查代碼時也是如此。

我不確定如何在這一點上做的。我懷疑我不應該使用html_safe，而是使用來自iframe api信息頁面（如下）的信息手動爲每個iframe創建播放器，但是在這一點上Im有點不知所措。任何幫助將超級讚賞。

https://developers.google.com/youtube/iframe_api_reference#Examples

來源

2013-09-25 pccjamie

是的，我已經經歷幾個什麼似乎是相關的問題看，但目前還不清楚哪一個是正確的（或者任何是）：（ – pccjamie

好了，所以我最終只是刪除此：

@videos = [] 
@video_ids.each do |video_id| 
    source = HTTParty.get("https://www.googleapis.com/youtube/v3/videos?part=id,snippet,player&id=#{video_id}&key=#{y_key}") 
    single_video = source["items"][0]["player"]["embedHtml"] 
    @videos.push(single_video) 
end

，而是剛剛返回的原始video_ids陣列的DOM，然後通過迭代得到每個視頻ID，然後包圍繞它的iframe就像這樣....

<% @video_ids.each do |v| %> 
<iframe id="player" class="video-slide" type="text/html" width="600" height="375" 
src="http://www.youtube.com/embed/<%= v %>?enablejsapi=1&origin=http://localhost:3000.com" 
frameborder="0"></iframe> 
<% end %>

和它的作品....更多或更少的:)

來源

2013-10-10 00:23:30 pccjamie

創建YouTube播放器與Data API V3

回答

相關問題