1

我正在尝试使用 YouTube API 来执行基于浏览器的上传，但也使用 Ajax 来显示进度条。

我从这里开始： https ://developers.google.com/youtube/2.0/developers_guide_protocol_browser_based_uploading

如果我只使用基本的 HTML 表单帖子，它可以 100% 工作。

    <form id="frmYouTube" enctype="multipart/form-data" method="post" action="https://uploads.gdata.youtube.com/action/FormDataUpload/YOUTUBE_URL_HERE?nexturl=https%3a%2f%2fdomain%2fpageafter%2fVideoUploadDone%3fid2%3dLOCAL_ID">
    <table>
        <tr>
            <td><input type="file" name="file" /></td>
        </tr>
        <tr>
            <td>
                <input type="hidden" name="token" value="YOUTUBE_TOKEN_HERE" />
                <input type="submit" value="Upload" />
            </td>
        </tr>
    </table>
    </form>

但是，如果我尝试添加一些 Javascript，我会遇到问题。我还包括 MooTools 和http://mootools.net/forge/p/form_upload中的 Request.File 类。

这是代码的简化版本： 

var yt = $('frmYouTube');

var ytDone = function () {

     // Code to display: 'Video upload complete. Return to <a href="/Acount">your account</a>.';
};

var ytProgress = function (event, xhr) {

    var loaded = event.loaded, total = event.total;

    // Code to display: 'Uploading... ' + (parseInt(loaded / total * 100, 10)) + '%';
};

yt.addEvents({ 'submit': function (ev) {

    ev.stop();

    var rf = new Request.File({
        url: yt.get('action'),
        onProgress: ytProgress,
        onFailure: function (xhr) {

            ytError('Upload Failed (1).');
        },
        onCancel: function () {
            ytError('Upload Canceled.');
        },
        onException: function () {
            ytError('Upload Failed (2).');
        },
        onSuccess: ytDone
    });

    yt.getElements('input').each(function (field) {

        if (field.files) {

            rf.append(field.get('name'), field.files[0]);
        } else {

            rf.append(field.get('name'), field.get('value'));
        }
    });

    rf.send();
}
});
</script>

此时文件已成功上传，YouTube 将 302 重定向返回到我的“nexturl”，但由于跨域规则不遵循重定向，我无法使用 Javascript 访问位置标头。

我见过一些涉及 iframe 的解决方案，但如果你想要一个进度条，那就行不通了。有没有人想出一个解决方法来将基于浏览器的上传到 YouTube 并显示一个进度条。

4

2 回答 2

0

基于浏览器的上传方法不支持 CORS。此处报告了该问题。V3 支持 CORS，但那里没有基于浏览器的上传方法。只是某种 oauth 的东西。基本上，您需要让用户注册 youtube，然后返回您的网站/应用程序，授予您权限并将视频上传到他的 youtube 帐户，然后上传视频。您无法允许浏览器客户端使用 V3 api 在您的 youtube 帐户上上传视频。

于 2013-10-10T15:32:01.833 回答
-1

YouTube 数据 API 确实支持 CORS。确保您的客户端 ID 设置为允许来自您的站点的跨源。为此，请访问https://code.google.com/apis/console/

另请注意，我们刚刚推出了一个新的 API，因此请尝试在https://developers.google.com/youtube/v3/docs/videos/insert上传视频

您还可以尝试 YouTube 上传小部件的一件事。它将为您处理上传，并允许您收听事件以了解上传进度。 https://developers.google.com/youtube/youtube_upload_widget

于 2012-10-30T20:32:19.497 回答