Youtube API 直接上传和返回 URL，可能在 Ajax 中？答案

【问题标题】：Youtube API Direct Upload and Return URL, Possibly in Ajax?Youtube API 直接上传和返回 URL，可能在 Ajax 中？
【发布时间】：2011-01-20 20:44:58
【问题描述】：

好的，情况就是这样。

我已经让 Youtube API 可以上传视频。上传后返回http://example.com/?status=200&id=3-1234xyz。

理想情况下，我希望通过 Ajax 提交和上传此 ID，然后返回 ID 以立即显示在页面上（最终将显示 URL 或视频的嵌入代码）。我正在使用 jquery，但我对这一切都束手无策。非常感谢任何和所有帮助、链接等！

【问题讨论】：

标签： jquery youtube-api

【解决方案1】：

使用 iframe。您只需将文件上传表单发布到 iframe 中，然后完成加载（您可以使用 $('#iframe').ready( ... ) 捕获此事件）然后您可以捕获视频 ID（因为它在同一个域）。

因此，您的上传表单将如下所示：

<form action="...?nexturl=IFRAME_URL" method="post" enctype="multipart/form-data" target="uploader">
<p>Please select the video you wish to upload to YouTube:</p>
<input type="file" name="file" value="" />
<input type="hidden" name="token" value="" />
<button>Upload</button>
</form>
<iframe id="uploader" name="uploader" style="display: none; width: 1px; height: 1px; border: none;"></iframe>

然后您的 iframe 需要做的就是将视频 id 传递给父级（或者您可以从父级读取它，但我更喜欢前者）：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
        var vars    = getVars();

        $( document ).ready( function()
        {
            parent.selectVideo( vars[ 'id' ] );
        });

        function getVars()
        {
            var vars = [];
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            var hash;

            for(var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');

                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }

            return vars;
        }
    -->
    </script>
    <title></title>
</head>
<body>
</body>

工作完成了：D

【讨论】：

所以我把它放在一起，它工作得很好，除了给我视频 ID 然后嵌入。我看到了 parent.selectVideo() 但我不确定我应该如何使用它。非常感谢您的回答顺便说一句，我几乎 100% 完成了！
更新：使用 Firebug 的控制台，我得到了这个错误：parent.selectVideo is not a function [Break On This Error] parent.selectVideo( vars[ 'id' ] );
想通了：parent.$("p.youtubeid").append(document.createTextNode( vars['id'] ));
酷，对不起，我没有得到你的 cmets。
嗨，我试过用这个，但是 target="uploader" opens new window...你能告诉我我做错了什么吗？