2014/05/22

透過Youtube API V2.0 取得影片資訊

Youtube有提供API可以取得影片資訊，那我們可以透過該API做一些事情
那這個範例我們就拿周杰倫【愛你沒差 官方完整MV】影片當作範例
可以直接透過底下的網址取得影片資訊以及影音檔的來源，也可以取得圖片得大小

http://gdata.youtube.com/feeds/api/videos/Videoid?v=2&alt=json


Videoid是Youtube影片URL v=之後的編碼


把該Videoid改為miBGaUagOz8，再將該網址貼到url即可得到JSON檔案



以其他格式輸出可以修改alt=format
v則是API版本
除此之外還有其他參數可以使用，請參閱『Standard Google Data API query parameters』
底下有寫個Sample，把Youtube影片網址貼到輸入欄


按下按鈕就會載入影片以及影片說明



<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <meta charset="utf8"/>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript">
  var CY = [];
  CY.openVideo = function(id){
   var url =  "http://gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=json";

   $.ajax({
    url: url,
    dataType: "json",
    success: function(data){
     $("#video").empty();
     $("#info").empty();
     $("#video").append("<iframe src="+ data.entry.content.src+" width=640px; height=480px;></iframe>");
     $("#info").append(data.entry.media$group.media$description.$t.replace(/\n/g, "<br>"));
     console.debug(data);
    }
   });
  };

  CY.myClick = function(){
   var id = $("#mText").val();
   if(id!==""){
    id = id.substring(32);
    CY.openVideo(id);
   }
  };
 </script>
 <style type="text/css">
  body{
   width: 100%;
   height: 100%;
  }

  #mText{
   width: 240px;
  }



 </style>
</head>
<body>
 <div id="video"></div>
 <div id="info"></div>
 <div>
  <input id="mText" type="text"/>
  <button onclick="CY.myClick()">OpenVideo</button>
 </div>
</body>
</html>




參考資料：
https://developers.google.com/youtube/2.0/developers_guide_protocol#Searching_for_Videos
By at
標籤: ,