如何使用YouTube API和jQuery将视频上传到YouTube?

时间:2010-11-22 02:25:44

标签: javascript jquery ajax youtube-api

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

在我的代码中,我已经为视频设置了元数据值,并从Data API接收了上传的令牌值。但是,当我尝试执行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 post 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参数并附加params以指示状态。如果我通过jQuery发送它,我该如何处理?

1 个答案:

答案 0 :(得分:2)

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

  • 创建一个iframe(这是您启动上传的地方)本身; ID = 'upload_iframe'
  • 创建将执行上传工作的上传文件(php,asp.net,无论如何......); upload.php的
  • 创建表单(id ='my_form'),设置multipart / form-data,设置target ='upload_iframe'并设置action ='upload.php'

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

希望有所帮助

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

你可以读到这个: http://code.google.com/apis/youtube/2.0/developers_guide_protocol_browser_based_uploading.html#Browser_based_uploading