javascript - 如何使用 YouTube API 和 jQuery 将视频上传到 YouTube？

Question

我正在尝试使用 Youtube DataAPI 将视频上传到我们网站的 YouTube 帐户。我一直在使用 the documentation for Browser-based uploading 中提供的示例并且我能够使基本示例起作用。问题是我似乎无法将其转换为可以与 jQuery 一起使用的方法。

在我的代码中，我已经为视频设置了元数据值，并从数据 API 收到了用于上传的 token 值。但是，当我尝试执行 jQuery 进行上传时，uploads.gdata.youtube.com 给了我以下信息(由 Fiddler 提供):

HTTP/1.1 404 Not Found
Server: Upload Server Built on Nov 11 2010 15:36:58 (1289518618)
Date: Mon, 22 Nov 2010 01:44:58 GMT
Pragma: no-cache
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate
Content-Length: 0
Content-Type: text/html

这是表格。该操作当前设置为“#”，因为我正在使用 $("form").submit 启动 JQuery 调用，但我不确定正确的操作应该是什么，因为我想做一切都通过 AJAX:

<form action="#" method="post" name="video_upload" enctype="multipart/form-data">           

<div class="field-group">
    <label style="margin-top:0px" for="video_name">video title</label>
    <input type="text" value="" class="required" tabindex="1" name="video_name" id="video_name">
    <div id="video_name_status"></div>
</div>
<div class="field-group">
    <label for="video_description">description</label>                       
    <textarea class="required" tabindex="2" name="video_description" rows="5" cols="40" id="video_description"></textarea>
    <div id="video_description_status"></div>

</div>                  
<div class="field-group">
    <label for="video_path">video file</label>
    <input  type="file" value="" class="required" tabindex="3" name="video_path" id="video_path">
    <div id="video_status"></div>
</div>

<div id="form-button-group">
    <input type="submit" value="Upload Video" name="submit" id="signup-button">                     
</div>


<div class="youtube-disclaimer">
By clicking 'Upload Video' you certify that you own all rights to the content or that you are authorized by the owner to 
make the content publicly available on YouTube, and that it otherwise complies with the YouTube Terms of Service located 
at <a href="http://www.youtube.com/t/terms">http://www.youtube.com/t/terms</a>.
</div>
</form>

这里是我用来执行调用的 jQuery(数据是我的服务器之前的 jQuery 调用返回的 JSON，其中包含 YouTube 帖子 URL、 token 和指示成功的值):

if (data.success == true){

                 $.ajax({
                       async : false,
                       type: "POST",
                       url: data.postUrl + "?nexturl=www.mysite.local",                        
                       data: ({file : $('#video_path'),
                               token : data.tokenValue,
                               alt : 'json-in-script'}),
                       contentType : 'multipart/form-data',
                       processData: false,
                       datatype: 'jsonp',
                       jsonpCallback: 'processVideoResponse',
                       success: function(data){
                            alert("success alert" + data);

                       },
                       error: function(data){
                           alert("error" + data);
                       }
                   });

最后，上传视频是问题的一半；一旦 YouTube 接受/拒绝视频，它应该将浏览器重定向到 nexturl 参数并附加参数以指示状态。如果我通过 jQuery 发送它，我该如何处理？

Answer 1

也许我错了，但是通过 AJAX 上传文件是不可能的(安全问题)；但也许 YouTube API 确实提供了一些我不知道的东西？!。解决方法:

• 自己创建一个 iframe(这是您启动上传的地方)； id='upload_iframe'
• 创建将执行上传工作的上传文件(php、asp.net 等...)；上传.php
• 创建一个表单 (id='my_form')，设置 multipart/form-data，设置 target='upload_iframe' 并设置 action='upload.php'

在 php 文件中，您还可以触发上传状态，例如上传失败(警报(“”))，成功后重定向(top.location.href ='sucess.php')或类似的东西。

希望对你有帮助

微调:此外，您可以通过添加监听器来检查字段是否具有值来修改上传字段按钮。如果是，您可以触发上传 $('#my_form').submit(); (需要 jquery)

您可以阅读以下内容: http://code.google.com/apis/youtube/2.0/developers_guide_protocol_browser_based_uploading.html#Browser_based_uploading