Youtube Video Upload using javascript(使用 javascript 上传 Youtube 视频)
问题描述
我正在尝试使用 javascript 制作基于浏览器的 youtube 视频上传器.
我正在使用 (源文件位于 https://code.google.com/p/youtube-api-samples/source/browse/#git%2Fyt-upload-javascript)显示上传流程,使用 Google+ 登录按钮处理 OAuth 2(如果您愿意,可以使用普通的 OAuth 2 浏览器客户端流程)并带有进度指示器.它还展示了如何在上传后轮询视频处理状态,并在处理后将生成的视频嵌入页面.
I am trying to make a browser based youtube video uploader using javascript.
I am using sample code from here
After authentication when I upload video, POST request to youtube server never ends and video is not uploaded.
This is happening in the sample provided by google too.
Here is the function that i am using to upload video:
$('#upload').click(function(){
$('#upload').attr('disabled', true);
var title = escapeXmlEntities($('#title').val());
var description = escapeXmlEntities($('#description').val());
var category = escapeXmlEntities($('#category option:selected').val());
var xmlBody = '<?xml version="1.0"?> <entry xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" xmlns:yt="http://gdata.youtube.com/schemas/2007"> <media:group> <media:title type="plain">' + title + '</media:title> <media:description type="plain">' + description + '</media:description> <media:category scheme="http://gdata.youtube.com/schemas/2007/categories.cat">' + category + '</media:category> </media:group> </entry>';
showMsg("Submitting metadata of video to get upload token.");
$.ajax({
dataType: 'xml',
type: 'POST',
url: 'https://gdata.youtube.com/action/GetUploadToken',
contentType: 'application/atom+xml; charset=UTF-8',
processData: false,
headers: generateYouTubeApiHeaders(),
data: xmlBody,
success: function(responseXml) {
var xml = $(responseXml);
var nextUrl = window.location.href;
var submissionUrl = xml.find('url').text() + '?nexturl=' + encodeURIComponent(nextUrl);
var token = xml.find('token').text();
showMsg("Uploading Video...");
$('#form_upload').attr('action', submissionUrl);
$('<input>').attr({
type: 'hidden',
name: 'token',
value: token
}).appendTo('#form_upload');
$('#form_upload').submit();
},
error: function(jqXHR) {
showMsg('Metadata submission failed: ' + jqXHR.responseText);
$('#upload').removeAttr('disabled');
$('#upload').val('Upload');
}
});
});
Here is the firebug screenshot of the last POST request made to youtube server that is never ending.
Moreover I want to get the progress of the video upload and show it using javascript but I don't know how to achieve it I googled and found many methods but nothing was successful for me.
There's now support for resumable uploads using CORS in the YouTube Data API v3.
A rough, but working, example at https://youtube-api-samples.googlecode.com/git/yt-upload-javascript/index.html (source files at https://code.google.com/p/youtube-api-samples/source/browse/#git%2Fyt-upload-javascript) that shows the upload flow, using the Google+ sign-in button to handle OAuth 2 (you can use the normal OAuth 2 browser client flow if you'd prefer) and with a progress indicator. It also shows how you could poll for video processing status following an upload and embed the resulting video on a page once it's been processed.
这篇关于使用 javascript 上传 Youtube 视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使用 javascript 上传 Youtube 视频
基础教程推荐
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01