从 YouTube API 请求视频在 HTML 页面中播放答案

【问题标题】：requesting video from YouTube API to be played in HTML page从 YouTube API 请求视频在 HTML 页面中播放
【发布时间】：2017-09-18 10:36:04
【问题描述】：

我正在尝试从 YouTube API 请求视频，但我只获得了视频的标题及其缩略图。我怎样才能播放视频？

注意：我使用的是 html 和 JavaScript 格式的 YouTube 文档

我尝试使用 item.sn-p.player.embedHtml 并将其放入，但没有显示任何内容。

这是我的代码：

  <!doctype html>
<html>
  <head>
  <title>Search</title>
  </head>
  <body>
    <div id="buttons">
    <label> <input id="query" type="text"/><button id="search-button"   onclick="keyWordsearch()">Search</button></label>    
    <div id="container">
      <h1>Search Results</h1>
      <ul id="results"></ul>
    </div>           
    <script>
     function keyWordsearch(){
        gapi.client.setApiKey('');
        gapi.client.load('youtube', 'v3', function() {
                makeRequest();
        });
}
    function makeRequest() {
        var q = $('#query').val();
        var request = gapi.client.youtube.search.list({
                q: q,
                part: 'snippet', 
                maxResults: 1
        });
        request.execute(function(response)  {                                                                                    
                $('#results').empty()
                var srchItems = response.result.items;                      
                $.each(srchItems, function(index, item) {
                vidTitle = item.snippet.title;  
                vidThumburl =  item.snippet.thumbnails.default.url;                 
                vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No  Image Available." style="width:204px;height:128px"></pre>';                   

                $('#results').append('<pre>' + vidTitle + vidThumbimg +  '</pre>');                      
        })  
    })  
}
  </script> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady">  </script>
</body>
</html>

【问题讨论】：

您将数据插入img - 根本无法播放。

标签： javascript api youtube youtube-data-api youtube-javascript-api

【解决方案1】：

您将数据插入到 img - 这根本不会播放。

尝试将以下video sn-p 用于vidThumbimg：

vidThumburl = item.contentDetails.videoId;

vidThumbimg = '<video>
               <source src="http://www.youtube.com/watch?v=' + vidThumburl + '" type="video/ogg">
               <source src="http://www.youtube.com/watch?v=' + vidThumburl + '" type="video/mp4">
               </video>'

【讨论】：

是的，我尝试过执行此 item.sn-p.player.embedHtml 并将其放入标记中，但没有成功。 @FelixHäberle

【解决方案2】：

你应该使用iFrame

let videoThumbnail = '<iframe id="player" type="text/html" width="640" height="390"' +
        'src = "https://www.youtube.com/embed/' + item.id.videoId + 
        '?enablejsapi=1&origin=http://example.com" frameborder = "0" ></iframe>';

$('#results').append('<pre>' + vidTitle + videoThumbnail + '</pre>');

编辑：
您必须提供自己的 API 密钥：JSFiddle

【讨论】：

仍然没有显示。 @emjames
您检查开发者控制台是否有错误？如果您没有使用 API 密钥，您可能已经超出了未经身份验证的使用限制
是的，我已经检查过了，我有自己的 YouTube API 密钥。@emjames
试用 JSFiddle 并记下@Al-Hanouf 可能出现的任何错误

【解决方案3】：

你为什么不试试php？

$videoID = 'ylLzyHk54Z0';  // change to suit
$ytrequrl = 'https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics,contentDetails,status,player,topicDetails&id='.$videoID.'&key='.$apikey;

<?php
$apikey = 'xxxxxxxxxx'; // replace with your key
$info= file_get_contents($ytrequrl);
$info= json_decode($info, true);

print("<pre>".print_r($info,true)."</pre>");
?>

更新::

一个让你开始的基本例子。

    <?php
    $apikey = 'xxxxxxxxxx'; // replace with your key
    error_reporting(0);
    if(isset($_GET['video'])){
        $videoID = $_GET['video'];
    }
    $ytrequrl = 'https://www.googleapis.com/youtube/v3/videos?part=snippet,player&id='.$videoID.'&key='.$apikey;
    $info= file_get_contents($ytrequrl);
    $info= json_decode($info, true);
    $userId =  $info['items']['0']['id'];
    $channel_name =  $info['items']['0']['snippet']['title'];
    $channel_thumbnail = $info['items']['0']['snippet']['thumbnails']['default']['url'];
    $watch = $info['items']['0']['player']['embedHtml']; 
    ?>
    <head>
    </head>
    <body>
    <form action="" method="get" enctype="multipart/form-data" target="_parent">
    <input name="video" type="text" value="<?php echo $videoID ?>" size="30">
    <input name="Submit" type="submit" id="submit" value="Submit">
    </form> 
    <?php echo $userId ?>
    <br />
    <?php echo $channel_name ?>
    <br />
    <?php echo $channel_thumbnail ?>
    <br />
    <?php echo $watch ?>
    <br />
    </body>

【讨论】：

太酷了！我不擅长 php。你能告诉我如何制作一个搜索框，以便用户可以输入任何文本来搜索而不是 ID。
更改为 $videoID = $_GET['video']; 。然后给自己发一个帖子。然后，网址将如下所示 www.yoursite.com/?video=ylLzyHk54Z0
感谢您的帮助。有效。但是我可以通过视频的标题而不是 ID 来搜索吗？@tempus
@Al-Hanouf 接受答案，如果它是正确的。只有礼貌才能这样做。至于字幕，您可以搜索视频是否有。然后您可以获得字幕信息。阅读本文了解更多信息developers.google.com/youtube/v3/docs/captions/list