如何在粘貼網址後顯示YouTube視頻數據，就像Facebook的牆上形式一樣？

如何在粘貼網址之後顯示YouTube視頻數據，如Facebook壁紙？ Like波紋管： enter image description here 如何在粘貼網址後顯示YouTube視頻數據，就像Facebook的牆上形式一樣？

這怎麼辦？有沒有任何jQuery插件能夠做到這一點？我也很喜歡圖片網址的相同的東西。

謝謝。

2013-04-05 valter

最有可能只是一個Ajax調用的禮貌它會在YouTube或任何網址上抓取圖片，以及2.簡短說明（很可能是屏幕上的第一個文本。 – 2013-04-05 18:57:35

您可以解析onchange事件的textarea值。然後使用簡單的ajax調用Youtube服務，如http://gdata.youtube.com/feeds/api/videos/BWBuW2GvF6A?v=2&alt=json，並使用接收到的數據的標題呈現縮略圖。

來源

2013-04-05 19:24:23

如果沒有任何webservice會怎麼樣？在任何本地網站的情況下。 Facebook曾經這樣做過一些股票 – 2013-04-05 19:42:12

此的jsfiddle - 它使用YouTube API - 將爲您提供一個基本的例子，讓你開始：

http://jsfiddle.net/g3x84/1/

這裏的例子在它的全部（因爲我要加入一些代碼，以及）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 

</style> 
<script type="text/javascript"> 
function parse_str (str, array) 
{ 
    var strArr = String(str).replace(/^&/, '').replace(/&$/, '').split('&'), 
     sal = strArr.length, 
     fixStr = function (str) 
     { 
      return decodeURIComponent(str.replace(/\+/g, '%20')); 
     }, 
     i, j, ct, p, lastObj, obj, lastIter, undef, chr, tmp, key, value, postLeftBracketPos, keys, keysLen; 


    if (!array) 
    array = this.window; 


    for (i = 0; i < sal; i++) 
    { 
     tmp = strArr[i].split('='); 
     key = fixStr(tmp[0]); 
     value = (tmp.length < 2) ? '' : fixStr(tmp[1]); 

     while (key.charAt(0) === ' ') 
     key = key.slice(1); 

     if (key.indexOf('\x00') > -1) 
     key = key.slice(0, key.indexOf('\x00')); 

     if (key && key.charAt(0) !== '[') 
     { 
      keys = []; 
      postLeftBracketPos = 0; 

      for (j = 0; j < key.length; j++) 
      { 
       if (key.charAt(j) === '[' && !postLeftBracketPos) 
       { 
        postLeftBracketPos = j + 1; 
       } 
       else if (key.charAt(j) === ']') 
       { 
        if (postLeftBracketPos) 
        { 
         if (!keys.length) 
         keys.push(key.slice(0, postLeftBracketPos - 1)); 

         keys.push(key.substr(postLeftBracketPos, j - postLeftBracketPos)); 
         postLeftBracketPos = 0; 

         if (key.charAt(j + 1) !== '[') 
         break; 
        } 
       } 
      } 

      if (!keys.length) 
      keys = [key]; 

      for (j = 0; j < keys[0].length; j++) 
      { 
       chr = keys[0].charAt(j); 

       if (chr === ' ' || chr === '.' || chr === '[') 
       keys[0] = keys[0].substr(0, j) + '_' + keys[0].substr(j + 1); 

       if (chr === '[') 
       break; 
      } 

      obj = array; 

      for (j = 0, keysLen = keys.length; j < keysLen; j++) 
      { 
       key = keys[j].replace(/^['"]/, '').replace(/['"]$/, ''); 
       lastIter = j !== keys.length - 1; 
       lastObj = obj; 

       if ((key !== '' && key !== ' ') || j === 0) 
       { 
        if (obj[key] === undef) 
        obj[key] = {}; 

        obj = obj[key]; 
       } 
       else 
       { 
        ct = -1; 

        for (p in obj) 
        { 
         if (obj.hasOwnProperty(p)) 
         { 
          if (+p > ct && p.match(/^\d+$/g)) 
          ct = +p; 
         } 
        } 

        key = ct + 1; 
       } 
      } 

      lastObj[key] = value; 
     } 
    } 
} 


function search(url) 
{ 
    if (url.indexOf("?") === -1 || url.indexOf("v=") === -1) 
    return; 

    var query_string = url.substr(url.indexOf("?")+1), 
     arr = []; 

    parse_str(query_string, arr); 

    var xhr = new XMLHttpRequest(); 

    xhr.onload = function(oEvent) 
    { 
     if (xhr.status == 200 && xhr.responseText) 
     { 
      var obj = JSON.parse(xhr.responseText); 

      var content = []; 

      content.push(
       '<img src="//img.youtube.com/vi/' + arr['v'] + '/0.jpg" style="width:80px; height:80px;" />', 
       obj.entry.title['$t'], 
       url, 
       obj.entry['media$group']['media$description']['$t'], 
       obj.entry.author[0].name['$t'] 
      ); 

      document.getElementById('data').innerHTML = content.join('<br /><br />'); 
     } 
    } 

    xhr.open("GET", "https://gdata.youtube.com/feeds/api/videos/" + arr['v'] + "?v=2&alt=json", false) 
    xhr.send(null); 
} 
</script> 
</head> 

<body> 

Input YouTube video URL:<br /> 
<input type="text" id="url" oninput="search(this.value)" /><br /> 

<br /> 

<div class="data" id="data"> 

</div> 

</body> 
</html>

注 - parse_str功能是php.js

來源

2013-04-05 19:49:58 Mark

如何在粘貼網址後顯示YouTube視頻數據，就像Facebook的牆上形式一樣？

回答

相關問題