尝试在html页面上使用youtube api

Trying to use youtube api on html page

本文关键字：youtube api html      更新时间：2023-09-26

这是我的代码：

<!DOCTYPE html>
<html lang="en" >
<head>
<script type="text/javascript">
    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('MyActualKey');
        search();
    }
    function search(){
        var request = gapi.client.youtube.search.list({
            part: 'snippet'
        });
        request.execute(onSearchResponse);
    }
    function onSearchResponse(response){
        showResponse(response);
    }
</script>
<title></title>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
</head>
<body>
    <div id="response"></div>
</body>
</html>

这段代码来自Codecademy，我想我可以在html页面上使用它，它会起作用。我从谷歌获得了一个API密钥，我在谷歌开发者控制台中将Youtube数据API v3设置为启用，但这段代码给了我一个空白页面。我做错了什么？

有一些缺失的代码片段，codecademy可能认为这些代码片段是理所当然的，但当将其放置在应用程序之外的您自己的服务器中时，这些代码片段至关重要。首先，你需要一行实际加载来自谷歌的gap库。你可以把这个放在你的代码中，就在收盘前：

<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>

简而言之，这将从谷歌的服务器上获取库，当它被加载时，库将自动调用你的onClientLoad方法，启动你的应用程序。

接下来，您说您有一个API密钥；请确保您将该密钥替换为，从而将其放入代码中

gapi.client.setApiKey('MyKey');

这个：

gapi.client.setApiKey('{WHATEVER_YOUR_ACTUAL_KEY IS');

最后，正如评论者所提到的，你的身体是空的，所以当你的代码执行showResponse方法时，就没有地方放回来的东西了。添加此：

<div id="response"></div>
相关文章：