youtube - YouTube API学院

标签 youtube youtube-api youtube-data-api

我刚刚完成了Codecademy上的YouTube API教程,并成功地使用以下代码在控制台窗口中显示了与给定“q”值相关的结果:

// Helper function to display JavaScript value on HTML page.
function showResponse(response) {
    var responseString = JSON.stringify(response, '', 2);
    document.getElementById('response').innerHTML += responseString;
}

// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
    // This API key is intended for use only in this lesson.
    // See http://goo.gl/PdPA1 to get a key for your own applications.
    gapi.client.setApiKey('AIzaSyCR5In4DZaTP6IEZQ0r1JceuvluJRzQNLE');

    search();
}

function search() {
    // Use the JavaScript client library to create a search.list() API call.
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: "Hello",
    });

    // Send the request to the API server,
    // and invoke onSearchRepsonse() with the response.
    request.execute(onSearchResponse);
}

// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
    showResponse(response);
}

和:
<!DOCTYPE html>
<html>
    <head>
        <script src="search.js" type="text/javascript"></script>
        <script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
    </head>
    <body>
        <pre id="response"></pre>
    </body>
</html>

我现在遇到的问题是我已将这段代码放入了自己的本地文件中,目的是加深我的理解并以适合自己的方式操作它,但是它只返回一个空白页。我认为它可以在Codecademy上使用,因为他们使用的是特定环境,而所使用的代码也许只能在该环境下使用,令我惊讶的是,他们没有提供有关在给定环境之外使用此代码需要进行哪些更改的信息,并希望有人可以阐明这一点吗?也许我完全错了,如果是这样,任何见识都会受到赞赏。

浏览器控制台输出:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

最佳答案

我也有同样的问题,但是当我使用Xampp时,它已解决。您要做的是在计算机上安装xampp,然后找到其目录。之后,您将找到一个名为“htdocs”的文件夹。只需将同时包含js和HTML文件的文件夹移到该文件夹​​中即可。现在,您必须打开Xampp控制面板,然后单击“开始”按钮-Apache和SQL Server。现在打开浏览器并输入URL:

http://localhost/“(您的htdocs目录名称包含您的两个页面)”

在此之后,单击.html文件就可以了。

关于youtube - YouTube API学院,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28769903/

相关文章:

react-native - react 原生YouTube-组件不可见

reactjs - 如何通过打开模式显示数组元素?

javascript - 加载多个 YouTube 视频 iFrame API

youtube-api - 如何使用数据 API 获取 YouTube channel 统计信息(例如过去 28 天)?

javascript - 通过GET请求获取YouTube播放列表的所有视频ID

javascript - 如何使用参数将函数api_addEventListener添加到Vimeo播放器

html - 如何摆脱嵌入YouTube视频中的黑条

youtube - 在Youtube GData Youtube类中搜索多个关键字

javascript - 如何在 Cocoa 应用程序中加载/暂停/恢复 YouTube 视频?

google-apps-script - YouTube.Search.list ReferenceError