Javascript 如何在粘贴url后显示youtube视频数据，就像Facebook'；什么样的墙形式？
在粘贴url后，如何像Facebook墙表单那样在表单下方显示youtube视频数据？像下面这样： 如何做到这一点？有没有jquery插件可以做到这一点？ 我也会感激同样的事情为图像网址Javascript 如何在粘贴url后显示youtube视频数据，就像Facebook'；什么样的墙形式？,javascript,jquery,facebook,Javascript,Jquery,Facebook,在粘贴url后，如何像Facebook墙表单那样在表单下方显示youtube视频数据？像下面这样： 如何做到这一点？有没有jquery插件可以做到这一点？ 我也会感激同样的事情为图像网址 谢谢。您可以在onchange事件上解析textarea值。 然后对Youtube服务进行简单的ajax调用，如，并根据接收到的数据呈现带有标题的缩略图。此JSFIDLE（使用）将为您提供一个入门的基本示例： 下面是完整的示例（因为我还必须包含一些代码） 函数parse_str（str，数组） { var
谢谢。您可以在onchange事件上解析textarea值。
然后对Youtube服务进行简单的ajax调用，如，并根据接收到的数据呈现带有标题的缩略图。此JSFIDLE（使用）将为您提供一个入门的基本示例： 下面是完整的示例（因为我还必须包含一些代码）
函数parse_str（str，数组）
{
var strArr=String（str）.replace（/^&/，''）.replace（/&$/，''）.split（'&'），
sal=垂直长度，
fixStr=函数（str）
{
返回组件（str.replace（/\+/g，'%20'））；
},
i、 j，ct，p，lastObj，obj，lastIter，unde，chr，tmp，key，value，post-leftbracketpos，key，keysLen；
if（！数组）
array=this.window；
对于（i=0；i-1）
key=key.slice（0，key.indexOf（'\x00'）；
如果（键和键字符（0）！='['）
{
键=[]；
postLeftBracketPos=0；
对于（j=0；jct&&p.match（/^\d+$/g））
ct=+p；
}
}
键=ct+1；
}
}
lastObj[key]=值；
}
}
}
函数搜索（url）
{
如果（url.indexOf（“？”）==-1 | | url.indexOf（“v=”）==-1）
返回；
var query_string=url.substr（url.indexOf（“？”）+1），
arr=[]；
parse_str（查询字符串，arr）；
var xhr=new XMLHttpRequest（）；
xhr.onload=函数（oEvent）
{
if（xhr.status==200&&xhr.responseText）
{
var obj=JSON.parse（xhr.responseText）；
var内容=[]；
内容推送(
'',
对象条目标题['$t']，
网址，
对象条目['media$group']['media$description']['$t']，
obj.entry.author[0]。名称['$t']
);
document.getElementById（'data'）.innerHTML=content.join（'
'）；
}
}
xhr.open（“GET”https://gdata.youtube.com/feeds/api/videos/“+arr['v']+”？v=2&alt=json”，false）
xhr.send（空）；
}
输入YouTube视频URL:
注意-parse_str函数是由提供的，很可能只是一个ajax调用，它在youtube或任何url上对1.图像和2.简短描述（很可能是屏幕上的第一个文本。如果没有任何Web服务怎么办？如果是任何本地网站。Facebook曾经为一些fb共享这样做过
<!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>