2

粘贴 url 后，如何在表单下方显示 youtube 视频数据，就像 Facebook 墙表单一样？像下面这样： 在此处输入图像描述

如何才能做到这一点？是否有任何 jquery 插件能够做到这一点？对于图片网址，我也将不胜感激。

谢谢。

4

2 回答 2

1

这个使用YouTube API的 jsfiddle将为您提供一个基本示例来帮助您入门：

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-05T19:49:58.093 回答
0

您可以在 onchange 事件上解析 textarea 值。然后对 Youtube 服务进行简单的 ajax 调用，如http://gdata.youtube.com/feeds/api/videos/BWBuW2GvF6A?v=2&alt=json并从接收到的数据中呈现带有标题的缩略图。

于 2013-04-05T19:24:23.987 回答