YouTube API浏览器基于AJAX的上传供进度栏

Question

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

我从这里开始：https://developers.google.com/youtube/2.0/developers_guide_protocol_browser_based_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，我会遇到问题。我还在http://mootools.net/forge/p/form_upload。

这是代码的简化版本：

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进行基于浏览器的上传并显示进度栏。

Answer 1

基于浏览器的上传方法不支持CORS。此问题在这里报告。V3中支持CORS，但您没有基于浏览器的上传方法。只是某种Oauth的东西。基本上，您需要要求用户注册YouTube，然后返回您的网站/应用程序，授予您许可并将视频上传到其YouTube帐户上，然后上传视频。您无法允许浏览器客户端使用V3 API上传视频。

Answer 2

YouTube数据API确实支持CORS。确保设置了客户ID，以允许从您的网站进行交叉来源。要这样做，请访问https://code.google.com/apis/console/

也请不要刚刚启动了新的API，因此请在https://developers.google.com/youtube/v3/docs/videos/videos/insert 上尝试一个视频上传

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