个人中心
gpt4 book ai didi

javascript - 如何在粘贴 url 后显示 youtube 视频数据，就像 Facebook 的 Wall 表单一样？

转载 作者：行者123 更新时间：2023-11-30 05:49:28 25 4
gpt4 key购买 nike

如何在粘贴 url 后在表单下方显示 youtube 视频数据，就像 Facebook 墙表单一样？像下面这样: enter image description here

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

谢谢。

最佳答案

这个 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 提供

关于javascript - 如何在粘贴 url 后显示 youtube 视频数据，就像 Facebook 的 Wall 表单一样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15841407/

25 4 0
文章推荐： java - 有没有一种方法可以编写 Mockito.when(...) 来覆盖方法的所有重载，即对于共享相同方法名称的任何调用返回相同的内容？
文章推荐： java - Spring路由是如何工作的？有没有办法访问它？
文章推荐： java - "variable is accessed from within inner class needs to be declared final"错误
文章推荐： java - Jackson Json 和@JsonAnySetter 的不稳定行为
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com