2016-03-30 13 views
1

Ich habe ein Problem damit verwandte Videos als Thumbnails zu einem bestimmten Video abrufen. In meinem Code habe ich die search->list richtig eingerichtet und gibt die verschiedenen Titel und Thumbnail URLs für die zugehörigen Videos zurück. Da search->list jedoch keinen Parameter contentDetails oder statistics enthält, habe ich eine weitere Frage zu meinem exakt gleichen Problem here gefunden und einen zweiten Aufruf für videos->list verwendet, da diese Parameter unterstützt werden, um die Dauer und die Anzahl der Aufrufe abrufen zu können. Aber das Problem ist, dass beide Werte (vidDuration & viewCount) nichts passieren und als undefined markiert werden, wie das Element durchlaufen und angehalten wird. Wie kann ich die duration und viewCount Werte des Artikels basierend auf search->list's Artikel machen?Ähnliche Videos mit Teil contentDetails und Statistiken - Youtube API V3

script.js:

function relatedVids(videoId) 
{ 
    debugger; 
    $.get(// get related videos related to videoId - relatedToVideoId 
     "https://www.googleapis.com/youtube/v3/search", 
     { 
      part: 'snippet', 
      maxResults: vidResults, 
      relatedToVideoId: videoId, // $.cookie("id"); from single-video.html 
      type: 'video', 
      key: 'XXXXXXXXX' 
     }, 

     function(data) 
     { 
      $.each(data.items, 
       function(i, item) 
       { 
        console.log(item); 
        var vidTitle = item.snippet.title; // video title 
        //var videoId = item.snippet.resourceId.videoId; // video id 
        //var vidDuration = item.contentDetails.duration; 
        //var viewCount = item.statistics.viewCount; 
        var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url 
        var extractVideoId = null; // var to extract video id string from vidThumbUrl 

        // check if vidThumbUrl is not null, empty string, or undefined 
        if(vidThumbUrl) 
        { 
         //console.log("vidThumbUrl: ", vidThumbUrl); 
         var split = vidThumbUrl.split("/"); // split string when '/' seen 
         extractVideoId = split[4]; // retrieve the fourth index on the fourth '/' 
         //console.log("extractVideoId: ", extractVideoId); // YE7VzlLtp-4 
         //console.log("split array: ", split); 
        } 
        else console.error("vidThumbUrl is either undefined or null or empty string."); 
        // if video title is longer than 25 characters, insert the three-dotted ellipse 
        if(vidTitle.length > 25) 
        { 
         var strNewVidTitle = vidTitle.substr(0, 25) + "..."; 
         vidTitle = strNewVidTitle; 
        } 

        // search->list only takes snippet, so to get duration and view count; have to call this function that has the recognized param structure 
        $.get(
         "https://www.googleapis.com/youtube/v3/videos", 
         { 
          part: 'contentDetails, statistics', 
          id: extractVideoId, //item.snippet.resourceId.videoId, 
          key: 'XXXXXXXXX', 
         }, 
         // return search->list item's duration and view count 
         function(item) 
         { 
          vidDuration = item.contentDetails.duration; // pass item's duration 
          return vidDuration; 
         }, 
         function(item) 
         { 
          viewCount = item.statistics.viewCount; // pass item's view count 
          return viewCount; 
         } 
        ); 


        try 
        { 
         var vidThumbnail = '<div class="video-thumbnail"><a class="thumb-link" href="single-video.html"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img src="' + vidThumbUrl + '" alt="No Image Available." style="width:204px;height:128px"/></a><p><a class="thumb-link" href="single-video.html">' + vidTitle + '</a><br/>' + convert_time(vidDuration) + '/Views: ' + viewCount + '</p></div>'; 

         // print results 
         $('.thumb-related').append(vidThumbnail); 
        } 
        catch(err) 
        { 
         console.error(err.message); // log error but continue operation  
        } 
       } 
      ); 
     } 
    ); 
} 

Einzel video.html Skript:

$(document).ready(function() 
{ 
    var videoId; 
    $(function() 
    { 
     if($.cookie("title") != null && $.cookie("id") != null) 
     { 
      var data = '<div class="video"><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + $.cookie("id") + '\"></iframe></div><div class="title">' + $.cookie("title") + '</div><div class="desc">' + $.cookie("desc") + '</div><div class="duration">Length: ' + $.cookie("dur") + '</div><div class="stats">View Count: ' + $.cookie("views") + '</div>'; 

      $("#video-display").html(data); 
      $("#tab1").html($.cookie("desc")); 

      videoId = $.cookie("id"); 
      //vidDuration = $.cookie("dur"); works but prints out the same value for each 
      //viewCount = $.cookie("views"); works but prints out the same value for each 
      debugger; 
      relatedVids(videoId); // called here 


      console.log("from single-vid.html globalPlaylistId: ", $.cookie("playlistId")); 


      // remove cookies after transferring it to this page for display 
      $.removeCookie("title"); 
      $.removeCookie("id"); 
      $.removeCookie("desc"); 
      $.removeCookie("views"); 
      $.removeCookie("dur"); 
      $.removeCookie("tags"); 
      $.removeCookie("playlistId"); 
     } 
    }); 
}); 

Antwort

1

Sie die item in den Suchergebnissen verweisen. Wenn Sie eine Abrufanfrage an Videos gesendet haben, erhalten Sie eine Antwort auf VideocontentDetails und Statistiken. Anscheinend haben Sie die zurückgegebene Antwort nicht erfasst.

$.get(
        "https://www.googleapis.com/youtube/v3/videos", 
        { 
         part: 'contentDetails, statistics', 
         id: videoId, //item.snippet.resourceId.videoId, 
         key: 'XXXXXXXXX', 
        }, 

        function(videoItem) 
        { 
         vidDuration = videoItem.contentDetails.duration; // pass item's duration 
         viewCount = videoItem.statistics.viewCount; // pass item's view count 
        } 
       ); 

Hinweis: Sie können durch Komma begrenzt eine Reihe von Video-IDs übergeben, um mehr Video contentDetails/Statistiken in einer Anfrage zu holen.

+1

Haben Sie etwas dagegen, mir ein Beispiel in Codeform zu zeigen? Vielen Dank! – TheAmazingKnight

+0

Ich habe meinen Code bearbeitet und einige Dinge verfeinert, wie zum Beispiel nur einen Parameter für die Funktion 'relatedVids (videoId)' und 'return' Schlüsselwort mit vidDuration und viewCount basierend auf dem, was Sie gesagt haben, aber aus irgendeinem Grund, der $ .get() 'Objekt von videoId zum Abrufen von' vidDuration' und 'viewCount' ist da, aber beide Werte haben immer noch nichts und bleiben null. – TheAmazingKnight

+0

@TheAmazingKnight Du hast meinen Standpunkt nicht verstanden. Zu Beginn haben Sie die Callback-Funktion für die 'videos'-get-Anfrage keine Parameter, was bedeutet, dass Sie die zurückgegebene Antwort ignorieren. Also überarbeitete ich Ihren Code, um einen Parameter 'videoItem' an den Callback zu übergeben. –

Verwandte Themen