基于浏览器的YouTube API上传与阿贾克斯的进度条

问题描述

我想使用YouTube API来执行基于浏览器的上传，而且还使用Ajax用于显示进度条的目的。

I am trying to use the YouTube API to perform a browser-based upload, but also use Ajax for the purpose of showing a progress bar.

我开始在这里：的

它的工作原理100％，如果我只使用基本的HTML表单提交。

It works 100% if I just use the basic HTML form post.

    <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的和Request.File类从 http://mootools.net/forge/p/ form_upload 。

这里是code的简化版本：    

Here is a simplified version of the code:

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的位置标头。

At this point the file gets uploaded successfully, and YouTube returns a 302 redirect to my "nexturl," but because of cross-origin rules the redirect is not followed and I can not access the location header using Javascript.

我已经看到了一些解决方案，涉及内部框架，但如果你想有一个进度条，这是行不通的。有没有人想出了一个变通做基于浏览器上传到YouTube，并显示一个进度条。

I've seen a few solutions that involved iframes, but that won't work if you want a progress bar. Has anyone come up with a work-around to do browser based uploads to YouTube and show a progress bar.

推荐答案

基于浏览器上传的方法不支持CORS。这个问题是这里报道。 CORS支持的V3，但你没有一个基于浏览器的上传方法在那里。只是某种OAuth的东西。基本上你需要问用户注册YouTube，然后回到你的网站/应用程序，让您的权限和上传视频对他的YouTube帐户，然后上传视频。有没有办法可以让浏览器客户端上传的视频上使用V3 API您的YouTube帐户。

The browser based upload method doesn't support CORS. The issue was reported here. CORS is supported in V3 but you don't have a browser based upload method there. Just some kind of oauth stuff . Basically you need to ask the user to sign up for youtube and then come back to your site/app, give you permission and upload the video on his youtube account and then upload the video. There is no way you can allow browser client to upload videos on your youtube account using the V3 api.

这篇关于基于浏览器的YouTube API上传与阿贾克斯的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！