YouTube API search.list - > JSON數據;如何使用「id/snippet」填充iFrame？

這裏是我的代碼：YouTube API search.list - > JSON數據;如何使用「id/snippet」填充iFrame？

//iframe 
var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; 
function onYouTubeIframeAPIReady(){ 
    player = new YT.Player('player',{ 
     height: '240', 
     width: '320', 
     videoId: "<--!XXXXXXX-->", 
     events : { 
      'onReady' : onPlayerReady, 
      'onStateChange' : onPlayerStateChange 
      } 
     }); 
    console.log('ytiframe api is rdy'); 
} 
function onPlayerReady(e){ 
    e.target.playVideo(); 
    console.log('ytplayer is rdy'); 
} 

function onPlayerStateChange() { 
    console.log('ytplayer state changed'); 
} 


//search 
function showResponse(response) { 
    var responseString = JSON.stringify(response, '', 2); 
    document.getElementById('response').innerHTML = responseString; 
} 
function onClientLoad() { 
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad); 
} 
function onYouTubeApiLoad() { 
    gapi.client.setApiKey('YT API KET'); 
    search(); 
} 
function search() { 
    var request = gapi.client.youtube.search.list({ 
     part: 'id', 
     q: 'video', 
     maxResults:1, 
     order: 'date' 
    }); 
    setTimeout(search, 5000); 
    console.log('Search success'); 
    request.execute(onSearchResponse); 
} 
function onSearchResponse(response) { 
    showResponse(response); 
}

而JSON.stringify結果的一個例子：

{ 
    "kind": "youtube#searchListResponse", 
    "etag": "\"q5k97EMVGxODeKcDgp8gnMu79wM/28PNG8cez--chz5e--vPEnvku1M\"", 
    "nextPageToken": "CAEQAA", 
    "regionCode": "CA", 
    "pageInfo": { 
    "totalResults": 1000000, 
    "resultsPerPage": 1 
    }, 
    "items": [ 
    { 
     "kind": "youtube#searchResult", 
     "etag": "\"q5k97EMVGxODeKcDgp8gnMu79wM/foAQ8JoA3_ECBS6pmAR96pU3mm0\"", 
     "id": { 
     "kind": "youtube#video", 
     "videoId": "tkui2fSqP2M" 
     } 
    } 
    ], 
    "result": { 
    "kind": "youtube#searchListResponse", 
    "etag": "\"q5k97EMVGxODeKcDgp8gnMu79wM/28PNG8cez--chz5e--vPEnvku1M\"", 
    "nextPageToken": "CAEQAA", 
    "regionCode": "CA", 
    "pageInfo": { 
     "totalResults": 1000000, 
     "resultsPerPage": 1 
    }, 
    "items": [ 
     { 
     "kind": "youtube#searchResult", 
     "etag": "\"q5k97EMVGxODeKcDgp8gnMu79wM/foAQ8JoA3_ECBS6pmAR96pU3mm0\"", 
     "id": { 
      "kind": "youtube#video", 
      "videoId": "tkui2fSqP2M" 
     } 
     } 
    ] 
    } 
}

我只是想借此「視頻ID」：從這個JSON和使用「6DJTgpOu7rs」它爲YT.Player。所以，videoId: 'xxxxxx';將是一個變量。

我不確定是否需要解析，或者如何構造它，以便我可以訪問JSON數據。

我已經搜索過有關這個，也許我的術語已關閉，但我還沒有看到任何完全一樣的東西。所以，如果之前已經回答過，我會離題。

來源

2016-04-04 yndrby

'jsonobject.result.items [0] .id.videoId' –

@SusheelSingh謝謝！雖然我不太清楚我的理解。我將展開：使用如下所示的iFrame功能： 'function onYouTubeIframeAPIReady（）{ var player; player = new YT.Player（'player'，{ videoId：「videoId」， ' 我可以把**「jsonobject.result.items [0] .id.videoId」**代替** 「videoId」**？ – yndrby

是的，但是如果有多個結果，你需要循環播放json對象 –

你可以嘗試如下的內容：

function onYouTubeIframeAPIReady(id){ 
    player = new YT.Player('player',{ 
     height: '240', 
     width: '320', 
     videoId: id, 
     events : { 
      'onReady' : onPlayerReady, 
      'onStateChange' : onPlayerStateChange 
      } 
     }); 
    console.log('ytiframe api is rdy'); 
} 


function showResponse(response) { 
    onYouTubeIframeAPIReady(response.result.items[0].id.videoId); 
}

來源

2016-04-04 14:31:11

不確定是因爲腳本的順序還是某些東西，但這不起作用。我沒有收到任何錯誤消息，但是可能JSON路徑是關閉的或'（id）'應該是'（videoId）'（嘗試過沒有做任何事情）。 – yndrby

請console.log一切，並調試你所得到的 –

YouTube API search.list - > JSON數據;如何使用「id/snippet」填充iFrame？

回答

相關問題