Question

我尝试从YouTube API请求视频，但我只获取视频及其缩略图的标题。我该如何播放视频？

注意：我在html和JavaScript中使用YouTube文档

我已尝试使用item.snippet.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>

Answer 1

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

尝试将以下video代码段用于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>'

Answer 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

Answer 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>

＆GT;

从YouTube API请求视频以HTML页面播放

3 个答案: