2013-04-17 168 views
0

我試圖讓我們網站的訪問者將視頻上傳到我們的YouTube頻道。因此,我不想使用OAuth處理身份驗證,否則我需要在任何地方遞交我們的用戶名和密碼。我不想直接上傳,因爲我不想自己託管視頻。使用YouTube API和CORS上傳視頻

因此,我有一個表單收集面板中的一些細節,該按鈕強制回發到創建Video對象的代碼後面並獲取FormUploadToken。然後,我使用這些信息創建一個在頁面上發佈爲文字的信息。

選擇文件,然後點擊上傳按鈕。立即,中止事件被觸發,但沒有理由爲什麼。

任何想法??幫助會非常讚賞:

  <form id="Form1" runat="server"> 
      <asp:Literal ID="Literal1" runat="server"></asp:Literal> 
      <br /> 
      <dx:ASPxPanel ID="ASPxPanel1" runat="server" Width="200px"> 
      <PanelCollection> 
       <dx:PanelContent ID="PanelContent1" runat="server" SupportsDisabledAttribute="True"> 
        <dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="Name"> </dx:ASPxLabel> 
        <dx:ASPxTextBox ID="NameTextBox" runat="server" Width="170px" Text="Simon"> </dx:ASPxTextBox> 
        <dx:ASPxLabel ID="ASPxLabel2" runat="server" Text="Email address"> </dx:ASPxLabel> 
        <dx:ASPxTextBox ID="EmailTextBox" runat="server" Width="170px" Text="[email protected]"> </dx:ASPxTextBox> 
        <dx:ASPxLabel ID="ASPxLabel3" runat="server" Text="Video title"> </dx:ASPxLabel> 
        <dx:ASPxTextBox ID="VideoTitleTextBox" runat="server" Width="170px" Text="My new video title"> </dx:ASPxTextBox> 
        <dx:ASPxLabel ID="ASPxLabel4" runat="server" Text="Keywords - comma separated"> </dx:ASPxLabel> 
        <dx:ASPxTextBox ID="KeywordsTextBox" runat="server" Width="170px" Text="India, Kochin"> </dx:ASPxTextBox> 
        <dx:ASPxLabel ID="ASPxLabel5" runat="server" Text="Video description"> </dx:ASPxLabel> 
        <dx:ASPxTextBox ID="VideoDescriptionTextBox" runat="server" Width="170px" Text="An amazing description that makes a lot of sense"> </dx:ASPxTextBox> 

        <dx:ASPxButton ID="ASPxButton1" runat="server" onclick="VideoUploadBttn_Click" Text="ASPxButton"> </dx:ASPxButton> 

       </dx:PanelContent> 
      </PanelCollection> 
      </dx:ASPxPanel> 
     </form> 

     <dx:ASPxPanel ID="ASPxPanel2" runat="server" Width="200px" Visible="False"> 
     <PanelCollection> 
     <dx:PanelContent ID="PanelContent2" runat="server" SupportsDisabledAttribute="True"> 
      <asp:Literal ID="Literal2" runat="server"></asp:Literal> 
     </dx:PanelContent> 
     </PanelCollection> 
     </dx:ASPxPanel> 

<script type="text/javascript"> 
    function fileSelected() { 
     var file = document.getElementById('fileToUpload').files[0]; 
     if (file) { 
      var fileSize = 0; 
      if (file.size > 1024 * 1024) 
       fileSize = (Math.round(file.size * 100/(1024 * 1024))/100).toString() + 'MB'; 
      else 
       fileSize = (Math.round(file.size * 100/1024)/100).toString() + 'KB'; 

      document.getElementById('fileName').innerHTML = 'Name: ' + file.name; 
      document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; 
      document.getElementById('fileType').innerHTML = 'Type: ' + file.type; 
     } 
    } 

    function uploadFile() { 
     var fd = new FormData(); 
     fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 
     var xhr = new XMLHttpRequest(); 
     xhr.upload.addEventListener("progress", uploadProgress, false); 
     xhr.addEventListener("load", uploadComplete, false); 
     xhr.addEventListener("error", uploadFailed, false); 
     xhr.addEventListener("abort", uploadCanceled, false); 

     xhr.open("POST", document.UploadForm.action); 
     console.log('action url: ' + document.UploadForm.action); 

     xhr.send(fd); 
    } 

    function uploadProgress(evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = Math.round(evt.loaded * 100/evt.total); 
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; 
     } 
     else { 
      document.getElementById('progressNumber').innerHTML = 'unable to compute'; 
     } 
    } 

    function uploadComplete(evt) { 
     /* This event is raised when the server send back a response */ 
     alert(evt.target.responseText); 
    } 

    function uploadFailed(evt) { 
     alert("There was an error attempting to upload the file."); 
    } 

    function uploadCanceled(evt) { 
     alert("The upload has been canceled by the user or the browser dropped the connection."); 
     console.log(evt); 
    } 
</script> 

然後後面的代碼看起來是這樣的:

protected void VideoUploadBttn_Click(object sender, EventArgs e) 
{ 
    Video newVideo = new Video(); 

    newVideo.Title = VideoTitleTextBox.Text; 
    newVideo.Tags.Add(new MediaCategory("Travel", YouTubeNameTable.CategorySchema)); 
    newVideo.Keywords = KeywordsTextBox.Text; 
    newVideo.Description = VideoDescriptionTextBox.Text; 
    newVideo.YouTubeEntry.Private = false; 
    newVideo.Keywords = "Travel"; 
    newVideo.Tags.Add(new MediaCategory("Motorbike", YouTubeNameTable.DeveloperTagSchema)); 

    // alternatively, you could just specify a descriptive string 
    // newVideo.YouTubeEntry.setYouTubeExtension("location", "Mountain View, CA"); 
    YouTubeRequestSettings settings = new YouTubeRequestSettings(_AppName, _APIKey, _Username, _Password); 
    YouTubeRequest request = new YouTubeRequest(settings); 

    FormUploadToken uploadToken = request.CreateFormUploadToken(newVideo); 
    string actionUrl = uploadToken.Url; 
    string token = uploadToken.Token; 

    StringBuilder sb = new StringBuilder(); 
    string url = String.Format("{0}?nexturl={1}", actionUrl, System.Web.HttpUtility.UrlEncode("http://bbc.co.uk")); 

    sb.AppendFormat("<form name=\"UploadForm\" action=\"{0}\" method =\"post\" enctype=\"multipart/form-data\" >", url); 
    sb.Append("<input type=\"file\" name=\"file\" id=\"fileToUpload\" onchange=\"fileSelected();\" />"); 
    sb.AppendFormat("<input type=\"hidden\" name=\"token\" value=\"{0}\"/>", token); 
    sb.Append("<div id=\"fileName\"></div>"); 
    sb.Append("<div id=\"fileSize\"></div>"); 
    sb.Append("<div id=\"fileType\"></div>"); 

    sb.Append("<input type=\"submit\" value=\"Upload\" onclick=\"uploadFile()\" />"); 
    sb.Append("<div id=\"progressNumber\"></div>"); 

    sb.Append("</form>"); 

    Literal2.Text = sb.ToString(); 

    ASPxPanel1.Visible = false; 
    ASPxPanel2.Visible = true; 
} 
+0

請不要寫任何系統,允許用戶任意上傳視頻到一個單一的通道。請參閱http://apiblog.youtube.com/2012/02/video-uploads-from-your-sites-community.html –

+0

Jeff,感謝您的評論。那麼,在頻道中看到YouTube視頻的比賽的首選方式是什麼? – Swomble

+0

好的,所以看了Jeff發來的鏈接,潛在的問題仍然沒有解決。即使將此更改爲使用oAuth並上傳到用戶自己的頻道而不是我們的,也不能解釋爲什麼立即中止上傳 – Swomble

回答

0

找到了!它與我們使用ClientLogin或CORS的事實無關,並且事實上表單按鈕上的輸入類型是提交類型而不是按鈕。

只需更改即可享受美食。添加AuthSubUtil非常簡單,因此視頻會上傳到個人帳戶,然後我們將它們鏈接到我們的播放列表。

新的問題似乎是與nextUrl參數 - 在這裏看到: Youtube API, nexturl and XMLHttpRequest