Question

我正在尝试使用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，我会遇到问题。我还包括来自http://mootools.net/forge/p/form_upload的MooTools和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上进行基于浏览器的上传工作并显示进度条。

Answer 1

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

Answer 2

YouTube Data 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

使用Ajax for Progress Bar进行基于YouTube API浏览器的上传

2 个答案: