根据API的结果嵌入YouTube视频

Hou*_*myM 1 html javascript api video youtube-api

我正在尝试使用YouTube API将YouTube视频嵌入到网页中.到目前为止,我已经能够使用API​​根据搜索条件"dog"收集结果.我将如何获取这些结果并将其转换为嵌入式视频.现在我将结果显示为index.html页面上的JSON文件.此外,这只适用于我的HTML和JavaScript文件托管在服务器上,有没有办法在本地执行此操作?

非常感谢您的帮助,并提前感谢您.

HTML:

<html>
    <head>
        <script src="javascript.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>
Run Code Online (Sandbox Code Playgroud)

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('API_KEY');

    search();
}

function search() {
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q:"dogs",

    });


    request.execute(onSearchResponse);
}

function onSearchResponse(response) {
    showResponse(response);
}
Run Code Online (Sandbox Code Playgroud)

noo*_*gui 6

  1. 要显示搜索结果中的视频,您将使用视频ID和iframe html标记.这是完整的教学视频和工作样本.您需要提供自己的API密钥.
  2. 设置像nodejs这样的服务器.由于您将使用localhost,请将http://localhost:port_number(8080等)添加到GDC上的HTTP refferrer.如果你的http refferer端口号是8080,那么你的nodejs端口号也应该是8080.
  3. 在URL中运行项目应该看起来像,http://localhost:4567/ViralVideos/index.html.希望有帮助:)