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 は「nexturl」への 302 リダイレクトを返しますが、クロスオリジン ルールのため、リダイレクトに従わず、Javascript を使用してロケーション ヘッダーにアクセスできません。

iframe を使用するソリューションをいくつか見てきましたが、プログレス バーが必要な場合は機能しません。YouTube へのブラウザ ベースのアップロードを行い、プログレス バーを表示するための回避策を思いついた人はいますか?

4

2 に答える 2

0

ブラウザ ベースのアップロード方法は、CORS をサポートしていません。この問題はここで報告されました。CORS は V3 でサポートされていますが、ブラウザ ベースのアップロード方法はありません。ある種の oauth のようなものです。基本的には、ユーザーに YouTube にサインアップしてからサイト/アプリに戻って許可を与え、ユーザーの YouTube アカウントに動画をアップロードしてから、動画をアップロードするよう依頼する必要があります。V3 API を使用して、ブラウザー クライアントが YouTube アカウントに動画をアップロードできるようにする方法はありません。

于 2013-10-10T15:32:01.833 に答える
-1

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

于 2012-10-30T20:32:19.497 に答える