Youtube API Direct Upload and Return URL, Possibly in Ajax?
Alright, here's the situation.
I've got the Youtube API working to upload a video. Once it is uploaded, it returns http://example.com/?status=200&id=3-1234xyz.
Ideally, I'd like to have this submitted and开发者_如何学运维 uploaded via Ajax and then have the ID returned to immediately display on the page (that will eventually show the URL or embed code for the video). I'm using jquery, but I'm at my whits end with all of this. Any and all help, links, etc are greatly appreciated!
Use an iframe. You simply post the file upload form into the iframe, when it's then finished loading (you can capture this event with $('#iframe').ready( ... )) you can then capture the video id (cos it's on the same domain).
So your upload form will be along the following lines:
<form action="...?nexturl=IFRAME_URL" method="post" enctype="multipart/form-data" target="uploader">
<p>Please select the video you wish to upload to YouTube:</p>
<input type="file" name="file" value="" />
<input type="hidden" name="token" value="" />
<button>Upload</button>
</form>
<iframe id="uploader" name="uploader" style="display: none; width: 1px; height: 1px; border: none;"></iframe>
And then all your iframe needs to do is just pass the video id up to the parent (or you can read it from the parent, but I prefer the former):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
<!--
var vars = getVars();
$( document ).ready( function()
{
parent.selectVideo( vars[ 'id' ] );
});
function getVars()
{
var vars = [];
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
var hash;
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
-->
</script>
<title></title>
</head>
<body>
</body>
And job done :D
加载中,请稍侯......
精彩评论